<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态轮播图</title>
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#box{
margin: 50px auto;
width: 285px;
height: 235px;
position:relative;
overflow: hidden;
}
ul{
width:1425px;
position:absolute;
}
ul img{
width: 285px;
height: 235px;
}
ul li{
float: left;
}
p{
position: absolute;
bottom: 10px;
left: 90px;
line-height: 20px;
text-align: center;
}
p span{
display: block;
float: left;
width: 15px;
height: 20px;
/*border: 1px solid seagreen;*/
margin: 2px;
background-color: #FFE4C4;
cursor: pointer;
}
p span.active{
color: white;
background-color: #5d5347;
}
button{
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
</ul>
<p></p>
</div>
<button id="play">播放</button>
<button id="stop">暂停</button>
</body>
<script type="text/javascript">
$(document).ready(function () {
//jquery动态添加图片
//1、获取本地图片数据
var imgArr=['./img/lb/1.jpg','./img/lb/2.jpg','./img/lb/3.jpg','./img/lb/4.jpg','./img/lb/5.jpg']
//2、动态生产图片
for(var i=0;i<imgArr.length;i++){
$('ul').append("<li><img src="+imgArr[i]+"> </li>")
}
//3、生成索引
var str=""
$('li').each(function (i,ele) {
str+="<span>"+i+"</span>"
})
//4、将索引添加到p标签中
$("p").append(str)
//设置第一个为active
$("span:first").addClass("active")
//5、点击索引
var index=0
$("span").click(function () {
$(this).addClass("active").siblings("span").removeClass("active")
//获取当前点击的索引
index = $(this).index()
$("ul").css("left",(-285*index));
});
//存储全局定时器变量
var timer=null;
$("#play").click(function () {
//开启定时器
//1、索引跟着走
//2、图片跟着走
timer=setInterval(next,1000);
function next() {
if(index==$('li').length-1){
index=0;
//修改第一个span元素
$("p span").eq(index).addClass("active").siblings("span").removeClass("active");
//修改图片left
$("ul").css('left',0);
}else{
index++;
//修改后面的元素
$("p span").eq(index).addClass("active").siblings("span").removeClass("active");
//修改图片left
$("ul").css('left',-285*index);
}
}
});
//清除定时器，实现暂停效果
$("#stop").click(function () {
clearInterval(timer);
})
})
</script>
</html>
