使用jQuery实现轮播图
Posted forever77
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jQuery实现轮播图相关的知识，希望对你有一定的参考价值。
一共6张图片，每1.5m自动切换播放图片，鼠标在图片内则停止自动播放。可通过底部列表手动播放图片，也可通过图片两侧按钮手动点击切换图片。效果图如下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script> <style> .outer{ width: 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 10px; left: 270px; list-style: none; } .num li{ display: inline-block; width: 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 20px; margin-left: 10px; } .btn{ position: absolute; width: 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; top: 140px; opacity: 0.6; } .left{left: 0;} .right{right: 0} .outer:hover .btn{display: block;} .num .active{background-color: cadetblue} </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> </ul> <ul class="num"> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div>
<script>
var i=0;
//自动创建轮播图底部轮播标签
for (var j=0;j<$(‘.img li‘).length;j++){
$(‘.num‘).append(‘<li></li>‘)
}
//给第一张图添加active
$(‘.num li‘).eq(0).addClass(‘active‘)
//底部轮播标签手动轮播
$(‘.num li‘).mouseover(function () {
i=$(this).index();//鼠标悬浮标签的索引值
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);;
$(‘.img li‘).eq(i).fadeIn(500).siblings().fadeOut(500);
})
//底部轮播标签自动轮播
var c=setInterval(toRight,1500);
var i=0;
function toRight() {
i++;
if (i==$(‘.img li‘).length)
i=0;
$(‘.num li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘) ;
$(‘.img li‘).eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function toLeft(){
i--;
if (i==-1)
i=$(‘.img li‘).length-1;
$(‘.num li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘) ;
$(‘.img li‘).eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
//鼠标悬浮在当前图片时停止自动轮播，鼠标移除时从移出前的位置开始轮播
$(‘.outer‘).hover(function () {
clearInterval(c);
},function () {
c=setInterval(toRight,1500);
})
$(‘.right‘).click(toRight)
$(‘.left‘).click(toLeft)
</script>
以上是关于使用jQuery实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章