本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！jq如何实现无缝轮播图效果（自动轮播）？（代码示例）
收藏 本篇文章给大家介绍jq实现无缝轮播图效果的方法，可以自动轮播，也可以手动点击切换轮播。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
我们在很多的网站上都可以看到轮播图，例如在淘宝、京东这些网站都有轮播图的存在；轮播图的使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。
轮播图有多种实现方式，可以用css实现、用jQuery实现、甚至是用其他框架实现，下面我们就以jQuery方法举例，用jQuery代码做一个自动+手动轮播图片的轮播图效果。
jq实现无缝轮播图效果（自动轮播）的代码示例：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实现无缝轮播图</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <ul class="img"> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div> </body> </html>
上面是html代码，代码的结构比较简单，这里解释一下，ul.img标签是要左右移动的，ul.img标签里就是轮播图的主体内容了；然后ul.num标签是提供索引和下标控制符，绑定动画的，会通过jq代码来控制数量与图片一致。btn_l和tn_r类名的div标签是提供左右按钮，这样轮播图就可以点击实现手动的左右滑动。
css代码：
* { padding: 0; margin: 0; list-style: none; } .banner { margin: 100px auto; border: 5px solid #000; width: 1000px; height: 640px; position: relative; overflow: hidden; } .banner .img { width: 5000px; position: absolute; left: 0px; top: 0px; } .banner .img li { float: left; } .banner .img li img { width: 1000px; } /*小圆点的样式*/ .banner .num { position: absolute; right: 40px; bottom: 30px; } .banner .num li { width: 20px; height: 20px; float: left; background: #333; margin-left: 20px; border-radius: 50px; border: 2px solid white; } .banner .num li.on { border: 2px solid #333; background: white } /*两边耳朵的样式*/ .banner .btn { position: absolute; width: 80px; height: 80px; background: rgba(0, 0, 0, 0.7); font-size: 60px; color: white; text-align: center; line-height: 80px; top: 50%; margin-top: -80px; cursor: pointer; display: none; } .banner:hover .btn { display: block; } .banner .btn_l { left: 10px; border-radius: 50% } .banner .btn_r { right: 10px; border-radius: 50% }
我们链接的外部css文件，然后请注意一下各种属性和值。
jquery代码：
首先要引用jquery.js文件
<script type="text/javascript" src="s/jquery-1.7.2.min.js"></script>
注：想要使用jquery来实现各种效果，就必须要先引用jquery.js文件，在使用jquery代码来实现各种效果。
在使用jquery语句来实现轮播效果：
<script> $(function() { var i = 0; var clone = $(".banner .img li").first().clone(); $(".banner .img").append(clone); var size = $(".banner .img li").size(); for(var j = 0; j < size - 1; j++) { $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function() { var index = $(this).index(); i = index; $(".banner .img").stop().animate({ left: -index * 1000 }, 500); $(this).addClass('on').siblings().removeClass('on'); }) /*轮播图自动轮播*/ var t = setInterval(function() { i++; move(); }, 2000); //对banner定时器的操作 $(".banner").hover(function() { clearInterval(t); }, function() { t = setInterval(move, 2000); }) /*向左按钮*/ $(".banner .btn_l").click(function() { i--; move(); }) /*向右按钮*/ $(".banner .btn_r").click(function() { i++; move(); }) /*封装函数*/ function move() { if(i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if(i == -1) { $(".banner .img").css({ left: -(size - 1) * 1000 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 1000 }, 500); if(i == size - 1) { $(".banner .num li").eq(0).addClass('on').siblings().removeClass('on'); } else { $(".banner .num li").eq(i).addClass('on').siblings().removeClass('on'); } } }) </script>
我们来看看效果（静态）：
总结：以上就是jQuery实现无缝轮播图效果的全部代码，大家可以自己动手尝试编译，看看效果，加深理解，制作属于自己的轮播图。希望能对大家的学习有所帮助，更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！
