jquery实现左右无缝轮播图

本文实例为大家分享了jquery无缝轮播图的实现代码，供大家参考，具体内容如下
 <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}.img{position: absolute;top: 0;left: 0}.img li{float: left;}.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}.num li{width: 10px;height: 10px;background:rgba（0,0,0,0.5）;display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}.btn{display: none;}.btn span{display: block;width: 50px;height: 100px;background: rgba（0,0,0,0.6）;color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}.num .active{background-color: #fff;}</style><script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script></head><body><div class="banner"><ul class="img"><li><a href="#"><img src="img/1.jpg" alt="第1张图片"></a></li><li><a href="#"><img src="img/2.jpg" alt="第2张图片"></a></li><li><a href="#"><img src="img/3.jpg" alt="第3张图片"></a></li><li><a href="#"><img src="img/4.jpg" alt="第4张图片"></a></li><li><a href="#"><img src="img/5.jpg" alt="第5张图片"></a></li></ul><ul class="num"></ul> //<div class="btn"><span class="prev"><</span><span class="next">></span></div> </div> <script> $（function（）{ var i=0;var timer=null;for （var j = 0; j < $（".img li"）.length; j++） {//创建圆点$（".num"）.append（"<li></li>"）}$（".num li"）.first（）.addClass（"active"）; //给第一个圆点添加样式 var firstimg=$（".img li"）.first（）.clone（）; //复制第一张图片$（".img"）.append（firstimg）.width（$（".img li"）.length*（$（".img img"）.width（）））; //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度// 下一个按钮$（".next"）.click（function（）{i++;if （i==$（".img li"）.length） {i=1; //这里不是i=0$（".img"）.css（{left:0}）; //保证无缝轮播，设置left值}; $（".img"）.stop（）.animate（{left:-i*600},300）;if （i==$（".img li"）.length-1） { //设置小圆点指示$（".num li"）.eq（0）.addClass（"active"）.siblings（）.removeClass（"active"）;}else{$（".num li"）.eq（i）.addClass（"active"）.siblings（）.removeClass（"active"）;} }） // 上一个按钮$（".prev"）.click（function（）{i--;if （i==-1） {i=$（".img li"）.length-2;$（".img"）.css（{left:-（$（".img li"）.length-1）*600}）;}$（".img"）.stop（）.animate（{left:-i*600},300）;$（".num li"）.eq（i）.addClass（"active"）.siblings（）.removeClass（"active"）;}） //设置按钮的显示和隐藏$（".banner"）.hover（function（）{$（".btn"）.show（）;},function（）{$（".btn"）.hide（）;}） //鼠标划入圆点$（".num li"）.mouseover（function（）{var _index=$（this）.index（）;$（".img"）.stop（）.animate（{left:-_index*600},150）;$（".num li"）.eq（_index）.addClass（"active"）.siblings（）.removeClass（"active"）;}） //定时器自动播放timer=setInterval（function（）{i++;if （i==$（".img li"）.length） {i=1;$（".img"）.css（{left:0}）;}; $（".img"）.stop（）.animate（{left:-i*600},300）;if （i==$（".img li"）.length-1） { $（".num li"）.eq（0）.addClass（"active"）.siblings（）.removeClass（"active"）;}else{$（".num li"）.eq（i）.addClass（"active"）.siblings（）.removeClass（"active"）;}},1000） //鼠标移入，暂停自动播放，移出，开始自动播放$（".banner"）.hover（function（）{ clearInterval（timer）;},function（）{timer=setInterval（function（）{i++;if （i==$（".img li"）.length） {i=1;$（".img"）.css（{left:0}）;}; $（".img"）.stop（）.animate（{left:-i*600},300）;if （i==$（".img li"）.length-1） { $（".num li"）.eq（0）.addClass（"active"）.siblings（）.removeClass（"active"）;}else{$（".num li"）.eq（i）.addClass（"active"）.siblings（）.removeClass（"active"）;}},1000）}） }）</script>
以上就是本文的全部内容，希望对大家学习Jquery程序设计有所帮助。