jquery实现轮播图
jquery实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>轮播图</title>
<style>
.outer {
width: 790px;
height: 340px;
margin:80px auto;
position: relative;
}
.outer .img li{
position: absolute;
top: 0;
left: 0;
}
.outer .btn {
position: absolute;
top:50%;
width: 25px;
height: 41px;
background-color: gray;
color: white;
font-weight: 600;
text-align: center;
line-height: 41px;
vertical-align: middle;
opacity: 0.3;
}
.outer .left{
left: 0;
}
.outer .right{
right: 0;
}
.outer .btn:hover{
opacity: 1;
}
.number{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
height: 24px;
width: 200px;
}
.outer .number li {
display: inline-block;
background-color: white;
width: 8px;
height: 8px;
border: 2px solid lightgray;
border-radius: 25px;
margin-right:8px;
text-align: center;
}
.outer .number .active {
background-color:peachpuff;
border-color: gray;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
<li><a href=""><img src="img/7.jpg" alt=""></a></li>
<li><a href=""><img src="img/8.jpg" alt=""></a></li>
</ul>
<ul class="number">
<!--<li class="active first"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn" > < </div>
<div class="right btn" > > </div>
</div>
<script>
var i=0;
var img_num=$(".img li").length;
for(var j=0;j<img_num;j++){
$(".number").append("<li></li>")
}
$(".number li:eq(0)").addClass("active");
/*手动轮播*/
$(".number li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
});
/*定时轮播*/
function go_left() {
if (i == 0) {
i = img_num;
}
i--;
$(".number li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function go_right() {
if (i == img_num) {
i = 0;
}
i++;
$(".number li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
c=setInterval(go_right,1000);
$(".outer").hover(function () {clearInterval(c)
},function () {c=setInterval(go_right,1000)
});
/*点击buttom定播*/
$(".left").click(go_left);
$(".right").click(go_right);
</script>
</body>
</html>
