原理
輪播圖的原理（js對圖片位置的修改+動畫+邏輯對應）
1 將圖片列表浮動并放置在尺寸小于列表尺寸的div中，再將溢出部分隱藏（overflow： hidden）
2 在圖片所在列表中分別克隆包含首個圖片的li和最后一張圖片的li,并將克隆出的第一張放在最后，將克隆后的最后一張放在最前面
3 對上一頁&下一頁的按鈕綁定點擊事件，事件中分別添加函數(shù)playPre()&playNext()
4 在兩個函數(shù)中分別添加動畫，使其水平滑動（分別向左向右滑動一個圖片的寬度imgWidth）
5 函數(shù)中應存在判斷，一是防止在左右滑動中圖片列表偏移大于圖片列表的尺寸從而出現(xiàn)白屏；二是為了實現(xiàn)輪播圖首尾循環(huán)（在函數(shù)中應用pageIndex標記滑動頁數(shù)，對應輪播圖中的圖片頁數(shù)。 當標記數(shù)等于圖片數(shù)n時，重新設置圖片列表偏移距離，也就是恢復至第一張圖片顯示時的距離，并重置pageIndex為0； 當標記數(shù)小于0時，重新設置圖片列表的偏移距離，也就是最后一張圖片顯示時的距離，并將pageIndex重置為n-1）
6 輪播圖中下方的標記塊的功能實現(xiàn)
6.1 通過讓全局變量pageIndex作為標記塊列表的索引值，再對對應標記塊添加類名active，使標記塊和圖片邏輯順序相對應
6.2 對標記塊綁定點擊事件，通過this獲得標記塊的索引值，再與pageIndex做減法，差m大于零則playNext(m),小于零，則playPre(m)
抽象出的函數(shù)
playPre()
function playPre(len){
if(isAnimate) return ;
isAnimate = true;
$imgGroup.animate({
left: "+=" + len*imgWidth
},function(){
pageIndex -= len;
if(pageIndex < 0){
$imgGroup.css("left", "-1400px");
pageIndex = 3;
}
setBullet();
isAnimate = false
});
}
playNext()
function playNext(len){
if(isAnimate) return ;
isAnimate = true;
$imgGroup.animate({
left: "-=" + len*imgWidth
},function(){
pageIndex +=len;
if(pageIndex === imgCount){
$imgGroup.css("left", "-350px");
pageIndex = 0;
}
setBullet();
isAnimate = false;
});
}
setBullet()
function setBullet(){
$bullet.removeClass("active").eq(pageIndex).addClass("active");
}
代碼實現(xiàn)
<html>
<head>
<meta charset="UTF-8">
<title>carousel</title>
<style>
.img-ct img {
width: 350px;
height: 210px;
}
.carousel {
width: 350px;
height: 210px;
overflow: hidden;
position: relative;
} //設置展示臺尺寸
.carousel ul,
.carousel li {
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 2100px;
overflow: hidden;
position: absolute;
}
.img-ct {
float: left;
}
.arrow {
width: 40px;
height: 40px;
border: 3px solid #dddddd;
border-radius: 50%;
color: #dddddd;
font-size: 40px;
line-height: 35px;
text-align: center;
position: absolute;
bottom: 50%;
margin-bottom: -20px;
z-index: 1;
cursor: pointer;
} //左右箭頭
.pre {
left: 5%;
}
.next {
right: 5%;
}
.bullet {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
z-index: 1;
font-size: 0;
}
.bullet li {
display: inline-block;
width: 30px;
height: 10px;
border: 1px solid #dddddd;
border-radius: 3px;
cursor: pointer;
margin: 0 3px;
}
.active {
background-color: #dddddd;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="carousel">
<ul class="content">
<li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"/></a></li>
<li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"/></a></li>
<li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"/></a></li>
<li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"/></a></li>
</ul>
<a class="pre arrow"><</a>
<a class="next arrow">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var $ct = $(".carousel");
var $img = $(".img-ct");
var $imgGroup = $(".content");
var imgCount = $img.length;
var $preBtn = $(".pre");
var $nextBtn = $(".next");
var imgWidth = $img.width();
var $bullet = $(".bullet li");
var isAnimate = false;
var pageIndex = 0;
$imgGroup.css("left", "-350px");
$(".content").append($img.first().clone());
$(".content").prepend($img.last().clone());
$preBtn.click(function(){
playPre(1);
});
$nextBtn.click(function(){
playNext(1);
});
function playPre(len){
if(isAnimate) return ;
isAnimate = true;
$imgGroup.animate({
left: "+=" + len*imgWidth
},function(){
pageIndex -= len;
if(pageIndex < 0){
$imgGroup.css("left", "-1400px");
pageIndex = 3;
}
setBullet();
isAnimate = false
});
}
function playNext(len){
if(isAnimate) return ;
isAnimate = true;
$imgGroup.animate({
left: "-=" + len*imgWidth
},function(){
pageIndex +=len;
if(pageIndex === imgCount){
$imgGroup.css("left", "-350px");
pageIndex = 0;
}
setBullet();
isAnimate = false;
});
}
function setBullet(){
$bullet.removeClass("active").eq(pageIndex).addClass("active");
}
$bullet.click(function(){
var index = $(this).index();
if(index > pageIndex){
playNext(index - pageIndex);
} else if (index < pageIndex) {
playPre(pageIndex - index);
}
});
setInterval(function(){playNext(1)},3000); //自動輪播
</script>
</body>
</html>