jq如何完成无缝轮播图效果（自动轮播）？（代码示例）
发表时间：2025-11-11 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家介绍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教程！
以上就是jq如何实现无缝轮播图效果（自动轮播）？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
