我这里实现无缝轮播的思路是:在ul后面多加第一个li。在轮播的时候,最后一张到第一张的时候,如果不多加第一的li的话,会在过渡的时候出现空白的效果。用加的li来替代空白的效果,在视觉上给人没有空白的效果,是循环的。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="carouselContainer">
<!--轮播图-->
<ul class="carouselContent clear">
<li class="carouselContentList">
<a href="">
<img src="../img/1.jpg" class="carouselImg" alt="">
</a>
</li>
<li class="carouselContentList">
<a href="">
<img src="../img/2.jpg" class="carouselImg" alt="">
</a>
</li>
<li class="carouselContentList">
<a href="">
<img src="../img/3.jpg" class="carouselImg" alt="">
</a>
</li>
<li class="carouselContentList">
<a href="">
<img src="../img/4.jpg" class="carouselImg" alt="">
</a>
</li>
<li class="carouselContentList">
<a href="">
<img src="../img/5.jpg" class="carouselImg" alt="">
</a>
</li>
</ul>
<!--小圆点-->
<ul class="dotContent clear"></ul>
</div>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>
CSS部分
/*1、通用 CSS :大部分元素具备的样式*/
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#000304;
margin:0;
background-color: #fff;
overflow-x: hidden;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
img{
vertical-align:middle;
}
a{
color:#000304;
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:focus{
text-decoration:none;
}
.lf{float:left;}
.rt{float:right;}
.clear:after{
content: ' ';
display: table;
clear: both;
}
.clear{
clear: both;
}
/*======轮播图=====*/
.carouselContainer{
width: 1200px;
height: 600px;
margin: 100px auto 0 auto;
overflow: hidden;
position: relative;
}
.carouselContent{
position: relative;
height: 600px;
}
.carouselContentList{
float: left;
width: 1200px;
height: 600px;
}
.carouselContentList>a{
display: block;
width: 1200px;
height: 600px;
}
.carouselImg{
width: 1200px;
height: 600px;
}
/*===小圆点==*/
.dotContent{
height: 10px;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 5%;
}
.dotContent>li{
float: left;
width: 28px;
height: 10px;
margin-left: 8px;
border-radius: 5px;
cursor: pointer;
background-color: #999;
}
.dotContent>li.dotHover{
background-color: #fff;
}
JS部分
$(document).ready(function () {
var dotUl=$(".dotContent"),
imgLi=$(".carouselContent>li"),
imgNumber=imgLi.length;
//根据图片的个数设置小圆圈的个数
for(var i=0,str="";i<imgNumber;i++){
str+="<li></li>";
}
dotUl.html(str).children(":first").addClass("dotHover");//设置默认第一个li为hover
var dotLi= $(".dotContent>li"),//获取按钮
dotUlWidth= Math.round(dotLi.outerWidth(true)),
dotLiMargin= Math.round(dotLi.outerWidth(true)-dotLi.outerWidth());//获取margin-left的值
$(".dotContent li").first().css("margin-left",0);//第一个li margin-left:0;
dotUl.css("width",imgNumber*dotUlWidth-dotLiMargin);//dot的ul的长度
var imgUl=$(".carouselContent"),
imgWidth=$(".carouselImg").width(),
wait=3000, //轮播的时间
speed=500,//每次轮播的时间
timer=null,//保存一次性定时器的序号
iNow = 0;//首先显示第一张图
imgUl.css("width",(imgNumber+1)*imgWidth);//ul的长度
//在ul后面加第一个li
$(".carouselContent li").first().clone().appendTo(imgUl);
//定时器
function move() {
timer=setInterval(function () {
iNow++;
imgUl.animate({
left : -imgWidth*iNow
},speed,function () {
if(iNow===imgNumber){
iNow=0;
imgUl.css("left","");//重置
}
dotUl.children(":eq("+iNow+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
});
},wait);
}
move();//启动第一次
//点击按钮
dotLi.on("click", function () {
if (!$(this).hasClass("dotHover")) {
$(this).addClass("dotHover").siblings().removeClass("dotHover");
}
iNow = $(this).index();//获取被点击按钮的下标
//图片过渡效果
imgUl.animate({
left:-imgWidth * iNow
}, speed);
});
//鼠标移入圆点暂停定时器
dotLi.mouseenter(function () {
clearTimeout(timer);
});
//鼠标移出圆点开始轮播
dotLi.mouseleave(function () {
iNow=$(this).index();
move();
});
});