jQuery实现轮播图（⽆缝轮播，附效果图），代码有详解。jQuery实现轮播图
这⾥⽤了⼀些有颜⾊的div块当做图⽚，复制之后可以直接⽤，有需要的话再根据⾃⼰的需求替换就可以了。
功能：
（1）左右⽆缝轮播。
（2）⿏标移上去会停⽌，移⾛继续动。
（3）点击圆点切换到对应的图⽚。
（4）点击箭头向对应的⽅向移动。
效果图：
jQuery代码（要引⼊jQuery⽂件）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 600px;
height: 400px;
border: 5px solid black;
margin: 100px auto;
overflow: hidden;
cursor: pointer;
position: relative;
}
.banner.slide {
width: 4000px;
height: 400px;
position: absolute;
left: -600px;
}
}
.banner.slide.pic {
width: 600px;
height: 400px;
line-height: 400px;
text-align: center;
float: left;
font-size: 72px;
color: white;
}
.banner.slide.a {
background-color: black;
}
.banner.slide.b {
background-color: pink;
}
.banner.slide.c {
background-color: purple;
}
.banner.dots{
width: 100px;
height: 30px;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -50px;
z-index: 2;/*让圆点显⽰在轮播图上⾯*/
}
.banner.dots.dot{
/*圆点的⼀些样式*/
width:20px;
height: 20px;
float: left;
border-radius: 50%;
margin:5px 6px;
background-color:rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;        cursor:pointer;
jquery在线图片}
.banner.dots.active{
/*⼩圆点⾼亮的样式*/
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background-color:#fff;
}
.banner.arrow{
/*左箭头*/
width: 0;
height: 0;
border-right: 30px solid rgba(255,255,255,.5);
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
left:0;
top: 50%;
margin-top: -30px;
z-index: 2;
}
.banner.arrow:hover{
/*⿏标移动到箭头时候的样式*/
border-right-color:white ;
}
.{
/*右箭头*/
left:auto;
right: 0;
right: 0;
top: 50%;
margin-top: -30px;
transform:rotate(180deg);
z-index: 2;
}
</style>
</head>
<body>
<div class="banner">
<div class="slide">
<!-- 这边多设置⼀张重复的图⽚就是我实现⽆缝轮播的关键之⼀啦，
当图⽚轮播到C的时候继续让它滑动，当切换到A（副本）的时候，
⽴马⽤JS将图⽚替换成图⽚A，然后，再从第⼆张开始轮播
在视觉上我们感受到的就是⽆缝轮播了。
这个瞬间就是0ms，我们⾁眼看不到的。-->
<div class="pic c">C</div><!-- C(副本)-->
<!-- 真正要轮播的就这三个ABC图⽚ -->
<div class="pic a">A</div>
<div class="pic b">B</div>
<div class="pic c">C</div>
<!-- 这边也是同样的道理，⽆缝轮播要添加的副本 -->
<div class="pic a">A</div><!-- A(副本)-->
</div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="arrow next"></div>
<div class="arrow prev"></div>
</div>
<!-- 这⾥引⽤jQuery的源码 -->
<script type="text/javascript"src="jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var index=1;//这是记录图⽚的索引，通过索引来控制图⽚的切换，
// 注意是从1开始的  [1,size-2]
var timer=null;//seInterval()函数会返回⼀个值，这是⽤来接收那个值的，可以⽤来停⽌轮播的效果var size=$('.slide').children().size();//图⽚的张数
var picWidth=$('.pic').width();//获取图⽚的宽度
//⿏标移上去的时候图⽚轮播要暂停
$('.banner').mouseover(function(){
clearInterval(timer);
});
//⿏标移⾛的时候再次开始
$('.banner').mouseleave(function(){
autoSlide();
});
/*这⾥要调⽤这个函数。这⾥也是⼀个关键。
因为当你点进这个页⾯以后不管你⿏标放在哪⾥，图⽚都是要动的吧。
这样⼦写的意思就是触发这个.slide类的mouseover事件，
⽽上⾯那个是给这个元素绑定事件*/
$('.slide').mouseleave();
//⾃动播放
function autoSlide(){
timer=setInterval(function(){
index++;//通过索引来控制图⽚嘛，每隔⼀段时间当然要让图⽚动起来。
changeImg();
changeDots();
},1500);//每隔1.5S就切换⼀次图⽚
};
// 图⽚切换函数
function changeImg(){
var slideWidth=-1*picWidth*index;//移动的距离
$('.slide').animate({
$('.slide').animate({
'left':slideWidth+'px'//每次滑动⼀个图⽚的距离
},500);//500的意思是动画效果要在500ms内完成
if(index>=size-1){
/*这是关键之三，
当移动到最后⼀张图⽚的时候,
瞬间（animate函数最后那个0代表转换时间为0ms，所以就是⼀瞬间的事）
切换为第⼀张。*/
$('.slide').animate({'left':-picWidth+'px'},0);// 图⽚切换过去
index=1;//索引要也切换为第⼀幅图的索引
}
if(index<1){
//要注意在执⾏下⾯这段函数之前，已经切换到图⽚C了。
$('.slide').animate({'left':-(size-2)*picWidth+'px'},0);// ⽽这⾥便是⽆缝切换的代码
// (⾁眼看不到)，但实际已经切换到图⽚C了
index=size-2;
}
}
//⼩圆点切换的函数
function changeDots(){
//给当前的⼩圆点添加⾼亮的样式（active），然后把其他⼩圆点的样式去掉。
/*这⾥设置index-1的原因是因为点只有三个。
当图⽚的索引为1，圆点的索引为0
图⽚索引为2，圆点索引为1
所以我们可以看到⼀直都差1*/
$('.dot').eq(index-1).addClass('active').siblings().removeClass('active');
}
//点击⼩圆点，切换到对应的图⽚
$('.dot').click(function(event){
var target=event.target;//获取点击到的⼩圆点，获取到的是⼀个DOM元素
//获取DOM元素的索引值。
index=$(target).index()+1;// +1的原因：看上⾯changeDots()的注释
changeImg();//改变图⽚
changeDots();// ⼩圆点的状态也要跟着变
});
/
/ 点击下⼀张切换图⽚
$('.next').click(function(){
index++;
changeImg();
changeDots();
});
// 点击上⼀张切换图⽚
$('.prev').click(function(){
index--;
changeImg();
changeDots();
});
</script>
</body>
</html>
刚学JQuery的时候，想着要做些什么来检验⼀下⾃⼰的学习成果，这时候在逛⼀些设计得⽐较优秀的⽹页的时候就看到了在主页上⾯不断切换的图⽚（当时不知道叫什么），这是我第⼀次对轮播图有了⼀些概念。于是就想能不能⾃⼰也做⼀个跟它效果⼀样的东西出来。遂在⽹上搜了资料，再结合⾃⼰所学过的JQuery知识，实现了⼀个⽆缝衔接轮播图的简单版本。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。