本篇文章给大家介绍jq实现无缝轮播图效果的方法，可以自动轮播，也可以手动点击切换轮播。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
我们在很多的网站上都可以看到轮播图，例如在淘宝、京东这些网站都有轮播图的存在；轮播图的使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。
轮播图有多种实现方式，可以用css实现、用jQuery实现、甚至是用其他框架实现，下面我们就以jQuery方法举例，用jQuery代码做一个自动+手动轮播图片的轮播图效果。
jq实现无缝轮播图效果（自动轮播）的代码示例：
html代码：
nbsp;html>jQuery实现无缝轮播图
上面是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文件
登录后复制
注：想要使用jquery来实现各种效果，就必须要先引用jquery.js文件，在使用jquery代码来实现各种效果。
在使用jquery语句来实现轮播效果：
$(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("");}$(".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');}}}) 登录后复制
我们来看看效果（静态）：
总结：以上就是jQuery实现无缝轮播图效果的全部代码，大家可以自己动手尝试编译，看看效果，加深理解，制作属于自己的轮播图。希望能对大家的学习有所帮助，更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！
以上就是jq如何实现无缝轮播图效果（自动轮播）？（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2737951.html
赞 (0)
