一芥映、輪播的實現(xiàn)原理
1.輪播是把需要輪播的圖片浮動水平排列成一排捷枯。
2.然后設置一個視窗滚秩，大小等于一張圖片。
3.視窗的overflow設置為hidden淮捆，溢出部分不可見郁油。
4.點擊下一頁本股，所有圖片就水平移動一個寬度。
5.如果要實現(xiàn)左右滾動無限循環(huán)的效果桐腌，就需要在圖片列表開頭和結尾分別添加最后一張圖和第一張圖
就像一張膠卷拄显，每次展示一張圖片，通過移動膠卷來切換可視的圖片案站。
二躬审、使用jquery實現(xiàn)圖片自動輪播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無限循環(huán)滾動輪播</title>
<style>
.carousel {
margin: 0 auto;
margin-top: 200px;
}
.carousel ul,
.carousel li {
margin: 0;
padding: 0;
list-style: none;
}
.carousel .img-ct img {
width: 400px;
height: 250px;
}
/*觸發(fā)BFC，清除浮動*/
.carousel .img-ct {
position: absolute;
overflow: hidden;
}
/*讓需要輪播的圖片水平浮動排列一排*/
.carousel .img-ct li {
float: left;
}
/*創(chuàng)造可視窗口承边，大小等于一個圖片的寬度，溢出部分不展示*/
.carousel {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
}
/*設置左右播放按鈕的樣式*/
.carousel .arrow {
position: absolute;
top: 50%;
margin-top: -15px;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #fff;
line-height: 30px;
font-weight: bold;
color: #fff;
text-align: center;
text-decoration: none;
}
.carousel .arrow:hover {
opacity: 0.7;
}
.carousel .pre {
left: 10px;
}
.carousel .next {
right: 10px;
}
/*設置圖片上的四個小按鈕*/
.carousel .bullet {
position: absolute;
width: 100%;
/*子元素不是浮動元素石挂，不用設置高度*/
bottom: 10px;
text-align: center;
}
.carousel .bullet >li {
display: inline-block;
width: 30px;
height: 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
/*設置inline-block會出現(xiàn)縫隙問題炒刁，解決方法設置font-size: 0;*/
font-size: 0;
}
.carousel .bullet >li.active {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="carousel">
<ul class="img-ct">
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
<a href="#" class="pre arrow"><</a>
<a href="#" class="next arrow">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
var $imgCt = $('.img-ct'),
$imgWidth = $('.carousel .img-ct >li').eq(0).width(),
$imgLen = $('.carousel .img-ct >li').length,
$preBtn = $('.carousel .pre'),
$nextBtn = $('.carousel .next'),
$bullet = $('.bullet li'),
//設置狀態(tài)鎖
lock = false,
//設置計時器
clock,
//記錄當前所在頁面
currentIndex = 0;
var $last = $imgCt.children("li").last().clone(),
$first = $imgCt.children("li").first().clone();
//在圖片列表開頭和結尾分別添加最后一張圖和第一張圖，這時圖片的個數(shù)變?yōu)?誊稚，而$imgLen值還是4，不是動態(tài)改變的
$imgCt.append($first);
$imgCt.prepend($last);
$imgCt.css({
//因為輪播的圖片個數(shù)可以根據(jù)需求改變罗心，所以$imgCt的寬度不應該寫死里伯，而應該動態(tài)計算
width: $imgWidth*($imgLen+2),
left: -$imgWidth
})
$preBtn.on('click',function(){
playPre(1);
})
$nextBtn.on('click',function(){
playNext(1);
})
timeClock();
//當鼠標在圖片上停留時，停止自動輪播
$(".carousel").on("mouseenter",function(){
clearInterval(clock)
})
//當鼠標離開時渤闷，開始自動輪播
$(".carousel").on("mouseleave",function(){
timeClock()
})
function playNext(len){
//設置狀態(tài)鎖防止?jié)L動過程中重復點擊
if(lock){
return;
}
lock = true
$imgCt.animate({
left: '-='+len*$imgWidth
},function(){
currentIndex+=len;
if (currentIndex === $imgLen) {
currentIndex = 0;
$imgCt.css({left: -$imgWidth})
}
setBullet();
lock = false;
})
}
function playPre(len){
if(lock){
return;
}
lock = true
$imgCt.animate({
left: '+='+len*$imgWidth
},function(){
currentIndex-=len;
if (currentIndex === -1) {
currentIndex = $imgLen-1;
$imgCt.css({left: -$imgLen*$imgWidth})
}
//當滾動到某個圖片時疾瓮，為其對應的小按鈕設置樣式
setBullet();
lock = false;
})
}
//點擊小按鈕滾動到對應圖片上
$bullet.on('click',function(){
var index = $(this).index();
if(index > currentIndex){
playNext(index - currentIndex)
}else if(index < currentIndex){
playPre(currentIndex - index);
}
})
function setBullet(){
$bullet.removeClass('active')
.eq(currentIndex)
.addClass('active')
}
//自動輪播，每個一秒滾動一次
function timeClock(){
clock = setInterval(function(){
playNext(1)
},1000)
}
</script>
</body>
</html>
三飒箭、在自動輪播代碼的基礎上改進代碼狼电，實現(xiàn)漸變輪播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無限循環(huán)滾動輪播</title>
<style>
.carousel {
margin: 0 auto;
margin-top: 200px;
}
.carousel ul,
.carousel li {
margin: 0;
padding: 0;
list-style: none;
}
.carousel .img-ct img {
width: 400px;
height: 250px;
}
/*觸發(fā)BFC，清除浮動*/
.carousel .img-ct {
position: absolute;
overflow: hidden;
}
/*讓需要輪播的圖片水平浮動排列一排*/
.carousel .img-ct li {
float: left;
}
/*創(chuàng)造可視窗口弦蹂，大小等于一個圖片的寬度肩碟，溢出部分不展示*/
.carousel {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
}
/*設置左右播放按鈕的樣式*/
.carousel .arrow {
position: absolute;
top: 50%;
margin-top: -15px;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #fff;
line-height: 30px;
font-weight: bold;
color: #fff;
text-align: center;
text-decoration: none;
}
.carousel .arrow:hover {
opacity: 0.7;
}
.carousel .pre {
left: 10px;
}
.carousel .next {
right: 10px;
}
/*設置圖片上的四個小按鈕*/
.carousel .bullet {
position: absolute;
width: 100%;
/*子元素不是浮動元素，不用設置高度*/
bottom: 10px;
text-align: center;
}
.carousel .bullet >li {
display: inline-block;
width: 30px;
height: 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
/*設置inline-block會出現(xiàn)縫隙問題凸椿，解決方法設置font-size: 0;*/
font-size: 0;
}
.carousel .bullet >li.active {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="carousel">
<ul class="img-ct">
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
<a href="#" class="pre arrow"><</a>
<a href="#" class="next arrow">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
var $imgCt = $('.img-ct'),
$imgWidth = $('.carousel .img-ct >li').eq(0).width(),
$imgLen = $('.carousel .img-ct >li').length,
$preBtn = $('.carousel .pre'),
$nextBtn = $('.carousel .next'),
$bullet = $('.bullet li'),
//設置狀態(tài)鎖
lock = false,
//設置計時器
clock,
//記錄當前所在頁面
currentIndex = 0;
var $last = $imgCt.children("li").last().clone(),
$first = $imgCt.children("li").first().clone();
//在圖片列表開頭和結尾分別添加最后一張圖和第一張圖削祈，這時圖片的個數(shù)變?yōu)?，而$imgLen值還是4脑漫，不是動態(tài)改變的
$imgCt.append($first);
$imgCt.prepend($last);
$imgCt.css({
//因為輪播的圖片個數(shù)可以根據(jù)需求改變髓抑，所以$imgCt的寬度不應該寫死，而應該動態(tài)計算
width: $imgWidth*($imgLen+2),
left: -$imgWidth
})
$preBtn.on('click',function(){
playPre(1);
})
$nextBtn.on('click',function(){
playNext(1);
})
timeClock();
//當鼠標在圖片上停留時优幸，停止自動輪播
$(".carousel").on("mouseenter",function(){
clearInterval(clock)
})
//當鼠標離開時吨拍，開始自動輪播
$(".carousel").on("mouseleave",function(){
timeClock()
})
function playNext(len){
//設置狀態(tài)鎖防止?jié)L動過程中重復點擊
if(lock){
return;
}
lock = true
//當前圖片淡出
$imgCt.fadeOut(200,function(){
currentIndex+=len;
})
$imgCt.fadeIn(200,function(){
if (currentIndex === $imgLen) {
$imgCt.css({left: -$imgWidth});
currentIndex = 0;
}
setBullet();
lock = false;
})
/*
$imgCt.animate({
left: '-='+len*$imgWidth
},function(){
currentIndex+=len;
if (currentIndex === $imgLen) {
currentIndex = 0;
$imgCt.css({left: -$imgWidth})
}
})
*/
}
function playPre(len){
if(lock){
return;
}
lock = true;
$imgCt.fadeOut(200,function(){
currentIndex -= len;
})
$imgCt.fadeIn(200,function(){
if (currentIndex === -1) {
$imgCt.css({left: -$imgLen*$imgWidth});
currentIndex = $imgLen-1;
}
setBullet();
lock = false;
})
/*
$imgCt.animate({
left: '+='+len*$imgWidth
},function(){
currentIndex-=len;
if (currentIndex === -1) {
currentIndex = $imgLen-1;
$imgCt.css({left: -$imgLen*$imgWidth})
}
當滾動到某個圖片時，為其對應的小按鈕設置樣式
setBullet();
lock = false;
})
*/
}
//點擊小按鈕滾動到對應圖片上
$bullet.on('click',function(){
var index = $(this).index();
if(index > currentIndex){
playNext(index - currentIndex)
}else if(index < currentIndex){
playPre(currentIndex - index);
}
})
function setBullet(){
$bullet.removeClass('active')
.eq(currentIndex)
.addClass('active')
}
//自動輪播网杆，每個一秒滾動一次
function timeClock(){
clock = setInterval(function(){
playNext(1)
},2000)
}
</script>
</body>
</html>
