版权声明: https://blog.csdn.net/qq_40999496/article/details/80825291
带按钮的无缝轮播的原理是:在ul的两边多加两张图,在轮播的过渡的过程中就不会有空白的部分。
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>
<!--左边按钮-->
<img src="../img/turnLeft.png" class="iconLeft" alt="">
<!--右边按钮-->
<img src="../img/turnRight.png" class="iconRight" alt="">
</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部分
/*通用 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;
}
/*=====左右按钮====*/
.iconLeft,.iconRight{
width: 80px;
height: 180px;
cursor: pointer;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}
.iconLeft{
left: 30px;
}
.iconRight{
right: 30px;
}
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 = 1;//首先显示第一张图
imgUl.css("width",(imgNumber+2)*imgWidth);//ul的长度
//在ul后面加第一个li
imgLi.first().clone().appendTo(imgUl);
//在ul前面加最后一个li
imgLi.last().clone().prependTo(imgUl);
//由于现在第一张图是最后一张,要把第一张图前移
imgUl.css("left",-imgWidth*iNow);
function animate() {
imgUl.animate({
left : -imgWidth*iNow
},speed,function () {
if(iNow===imgNumber+1){
iNow=1;
imgUl.css("left",-imgWidth*iNow);//重置
}
dotUl.children(":eq("+(iNow-1)+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
});
}
//定时器
function move() {
timer=setInterval(function () {
iNow++;
animate();
},wait);
}
move();
//点击小圆点
dotLi.on("click", function () {
if (!$(this).hasClass("dotHover")) {
$(this).addClass("dotHover").siblings().removeClass("dotHover");
}
iNow = $(this).index()+1;//获取被点击按钮的下标
//图片过渡效果
imgUl.animate({
left:-imgWidth * iNow
}, speed);
});
//鼠标移入圆点暂停定时器
dotLi.mouseenter(function () {
clearTimeout(timer);
});
//鼠标移出圆点开始轮播
dotLi.mouseleave(function () {
iNow=$(this).index()+1;
move();
});
//点击左按钮
$(".iconLeft").click(function () {
clearTimeout(timer);
iNow=dotLi.index($(".dotHover"));
imgUl.animate({
left : -imgWidth*iNow
},speed,function () {
if(iNow===0){
iNow=imgNumber;
imgUl.css("left",-imgWidth*iNow);//重置
}
dotUl.children(":eq("+(iNow-1)+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
});
move();
});
//点击右按钮
$(".iconRight").click(function () {
clearTimeout(timer);
iNow=dotLi.index($(".dotHover"))+2;
animate();
move();
});
});
效果图