Collection
Collection
幻灯，自动轮播图
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>幻灯/自动轮播图</title>
<style>
.box {
width: 1920px;
height: 500px;
}
.box ul {
padding: 0;
margin: 0;
}
/*初始化时,必须先把全部图片先隐藏*/
.box ul:first-of-type li {
list-style: none;
display: none;
}
.box ul:last-of-type {
text-align: center;
margin-top: -50px;
}
.box ul:last-of-type li{
list-style: none;
display: inline-block;
width: 26px;
height: 26px;
line-height: 26px;
background-color: black;
color: white;
border-radius: 50%;
margin: 0 5px;
}
.box ul:last-of-type li:hover {
cursor: pointer;
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="box">
<ul class="slider">
<!-- 只需要将指定的某一个显示出来即可,其它的用JS控制-->
<li style="display: block" id="active"><img src="static/images/banner1.jpg" alt=""></li>
<li><img src="static/images/banner2.jpg" alt=""></li>
<li><img src="static/images/banner3.jpg" alt=""></li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
// 1.获取到所有按钮
// 原生JS
// var lis = document.querySelectorAll('.box ul:last-of-type li');
// 获取当前正在显示的图片
// var currentImg = document.querySelector('#active img');
//jQuery
var lis=$('.box ul:last-of-type li');
var currentImg=$('#active img');
// 2.点击后切换图片
//原生JS
// for (var i = 0; i < lis.length; i++) {
// // 自定义索引,获取到当前正在显示的图片索引
// lis[i].index = i;
// // 给每一个按钮添加点击事件
// lis[i].onclick = function () {
// currentImg.src = 'static/images/banner'+parseInt(this.index+1) + '.jpg';
// };
// }
//jQuery
lis.each(function (index,element) {
element.addEventListener('click',function () {
currentImg.attr('src','static/images/banner'+parseInt(index+1) + '.jpg');
lis.each(function (index) {
$(this).css({'background-color':'black','color':'white'});
});
$(this).css({'background-color':'white','color':'black'});
},false);
});
// 3. 用间歇式定时器, 每隔2秒随机切换图片
//原生JS
// setInterval(function () {
// var n = Math.floor(Math.random()*3)+1;
// currentImg.src = 'static/images/banner'+parseInt(n) + '.jpg';
// }, 2000);
//jQuery
setInterval(function () {
//随机数 1~3
var n = Math.floor(Math.random()*3)+1;
currentImg.attr('src','static/images/banner'+parseInt(n) + '.jpg');
lis.css({'background-color':'black','color':'white'});
$(lis[n-1]).css({'background-color':'white','color':'black'});
}, 2000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
