用jQuery写轮播图
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="index.css"> <script src="jquery-3.3.1.min.js"></script> <script src="index.js"></script> </head> <body> <div class="container"> <div class="warp-head"> <span class="left"><</span> <span class="right">></span> <div class="dot"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> <div class="warp-body"> <ul class="img"> <li><img src="images/1.jpg" style="width:500px; height:300px"></li> <li><img src="images/2.jpg" style="width:500px; height:300px"></li> <li><img src="images/3.jpg" style="width:500px; height:300px"></li> <li><img src="images/4.jpg" style="width:500px; height:300px"></li> <li><img src="images/5.jpg" style="width:500px; height:300px"></li> </ul> </div> </div> </body> </html>
JS:
$(function () { let index = 0; let index1 = 4; let timer; //1.方向键 $(".warp-head").hover(function () { $(".warp-head span").css({"display": "inline-block"}); stopPlay(); }, function () { $(".warp-head span").css({"display": "none"}); timerPlay(); }); //2.自动播放 timerPlay(); function timerPlay() { timer = setInterval(autoPlay, 2000); } function autoPlay() { index++; if (index > 4) { index = 0; } $(".dot li").eq(index).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#379a79", "border": "" }); $(".img li").eq(index).stop().fadeIn(1000, "linear").siblings().fadeOut(1000, "linear"); } function autoPlay1() { index1--; if (index1 < 0) { index1 = 4; } $(".dot li").eq(index1).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#379a79", "border": "" }) $(".img li").eq(index1).stop().fadeIn(1000, "linear").siblings().fadeOut(1000, "linear"); } //2.1停止播放 function stopPlay() { clearInterval(timer) } //3.上翻下翻点击事件 $(".right").on("click", autoPlay); $(".left").on("click", autoPlay1); });
CSS:
*{
list-style: none;
margin: 0;
padding: 0;
}
.container{
margin: 100px auto;
width: 500px;
height: 300px;
overflow: hidden;
}
.warp-body{
width: 500px;
height: 300px;
}
.warp-head{
position: absolute;
width: 500px;
height: 300px;
}
.warp-head span{
position: relative;
display: none;
font-size: 36px;
border: 1px solid #cccc;
background-color: #cccc;
opacity: .8;
cursor: pointer;
margin: 127px 15px;
padding: 5px;
}
.left{
float: left;
}
.right{
float: right;
}
.img li img{
cursor: pointer;
}
.dot{
width: 170px;
height: 15px;
position: relative;
margin: 260px auto;
}
.dot li{
display: inline-block;
height: 15px;
width: 20px;
background: #379a79;
margin: 0 auto;
}