实例
<!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: 100%;
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/banner0.jpg" alt=""></li>
<!-- <li><img src="static/images/banner2.jpg" alt=""></li>-->
<!-- <li><img src="static/images/banner3.jpg" alt=""></li>-->
</ul>
<ul>
<li class="q">1</li>
<li class="q">2</li>
<li class="q">3</li>
</ul>
</div>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
//var lis = $('.box .slider li');
var btn = $('.box ul:last-of-type li');
var img = $('#active img')[0];
$.each(btn,function (value,element) {
//$.each比较特殊，回调函数里面的element===this，是当前遍历的元素对象，可以直接添加事件
//console.log(this +'-----' + value);
//console.log(btn[value]);
// console.log(value);
//把element元素包装成jq对象，才可以使用.click
// $element=$(btn[value])=this
$(element).on('click',function(){
img.src='static/images/banner'+ value + '.jpg';
move(element); //移出添加样式函数
})
});
//移出添加样式函数
function move(element){
for(var i=0;i<btn.length;i++){
$(btn[i]).attr('style','');
}
$(element).css('background-color','lightblue');
}
setInterval(function () {
//console.log(lis[n]);
//制作做一个1-3的随机数，random:0-1 , *3后为1-3,fool：向下取整
var n = Math.floor(Math.random()*3);
//parseInt()小数取整，舍去小数部分
img.src = 'static/images/banner'+ parseInt(n) + '.jpg';
for(var i=0;i<btn.length;i++) {
$(btn[i]).attr('style', '');
}
$(btn[n]).css('background-color','lightblue');
//console.log(this);
}, 2000);
//以下是老师源代码（用原生JS写的） 图片+1 是因为图片的开始数字是1，以上的代码为图片从0开始，因此不用+1
// // 获取到所有按钮
// var lis = document.querySelectorAll('.box ul:last-of-type li');
// // 获取当前正在显示的图片
// var currentImg = document.querySelector('#active img');
//
// // 点击后切换图片
// 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';
// };
// }
//
// // 用间歇式定时器, 每隔2秒随机切换图片
// setInterval(function () {
// //制作做一个1-3的随机数，random:0-1 , *3后为1-3,fool：向下取整
// var n = Math.floor(Math.random()*3)+1;
// currentImg.src = 'static/images/banner'+ parseInt(n) + '.jpg';
// //console.log(lis[n-1]);
// Object.keys(lis).forEach(function (index) {
// lis[index].setAttribute('style','background-Color:none');
// });
// lis[n-1].setAttribute('style','background-color:red');
// //console.log(this);
//
//
// }, 2000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例