實(shí)現(xiàn)如下輪播效果(漸變輪播)
task27-1一個(gè)頁面有3個(gè)輪播
task-27-2實(shí)現(xiàn)如下無限循環(huán)滾動輪播效果
task-27-3全屏輪播
task-27-4
思路
最近學(xué)習(xí)了用JQuery實(shí)現(xiàn)輪播，也開始自己嘗試寫一些文章鞏固知識，下面是一些輪播的知識。
什么是輪播
用圖片來說明一下（圖片是轉(zhuǎn)載的）
輪播效果圖.png
-
那么，他的原理是怎樣的呢？
- 可以操作DOM的順序來實(shí)現(xiàn)輪播效果（這個(gè)并不推薦，因?yàn)楹艹孕阅埽?/li>
- 也是本文所說的，利用clone來實(shí)現(xiàn)輪播
- 以下是原理圖
Paste_Image.png
原理是，clone兩個(gè)邊界，一個(gè)是開頭（clone0），位于輪播框架最前的位置，一個(gè)是結(jié)尾（clone3）,位于輪播框架的最后的位置，只要在輪播的時(shí)候輪播到這兩個(gè)邊界，利用CSS直接改變整個(gè)輪播框架的位置來跳回到第一幅圖（0）或者最后一幅圖（3）。
-
接下來，讓我們看一下他的結(jié)構(gòu)來繼續(xù)了解原理吧！
-
HTML的結(jié)構(gòu)
-
我們知道，輪播是有幾張圖片組成，那么我們可以使用<ul> <li>來編寫。
<!--儲存圖片和存儲框架-->
<div class="carousel>
<ul class="img-ct">
<li style="background:yellow"></li>
<li style="background:red"></li>
<li style="background:blue"></li>
<li style="background:black"></li>
</ul>
<!--左右按鈕，按右是下一張圖片，按左是上一張圖片 -->
<a href="#" class="btn left"> < </a>
<a href="#" class="btn right"> > </a>
<!--下欄按鈕，選取哪個(gè)到哪個(gè)圖片 -->
<ul class="bottom-btn">
<li class="active"><li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
-
CSS結(jié)構(gòu)
- 我們要讓輪播圖設(shè)置成絕對定位，這樣就可以使用JS讓他移動
- 要讓圖片打橫排列，必須設(shè)置浮動，問題來了，浮動之后，圖片是如下面這樣呈現(xiàn)的
-
Paste_Image.png
因此，我們需要隱藏元素，只讓他呈現(xiàn)一張圖。我們可以使用overflow:hidden來實(shí)現(xiàn)這個(gè)功能，他可以讓多余的元素隱藏。
/* 基礎(chǔ)樣式去除 */
html,body,ul,li{
margin:0;
padding:0;
a{
text-decoration:none
}
li{
list-style:none
}
/*整個(gè)輪播框和每個(gè)輪播圖的樣式 */
.carousel{
width:500px;
height:300px;
overflow:hidden;
position:relative;
.img-ct{
position:absolute
}
.img-ct:after{
content:"";
display:block;
clear:both
}
.img-ct li{
float:left
width:500px;
height:300px;
}
/* 左右按鈕樣式 */
.btn{
position:absolute;
top:50%;
margin-top:10px;
width:30px;
height:30px;
line-height:30px;
text-align:center;
border-radius:30px;
background:#eee;
color:#fff;
opacity:0.7;
.btn:hover{
opacity:1;
}
.left{
left:10px;
}
.right{
right:10px;
}
/* 下欄的按鈕 */
.botton-btn{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
.botton-btn:after{
content:''
display:block;
clear:both
}
.botton-btn li{
margin-left:9px;
width:30px;
height:15px;
float:left;
border-radius:5px;
background:#fff;
cursor:pointer
.botton-btn li.active{
background:#4E443C
- Javascript
CSS和HTML寫完了，我們可以開始clone兩個(gè)邊界，然后通過改變整個(gè)輪播框的位置來讓他實(shí)現(xiàn)輪播
//各種變量聲明
var $ct = $('.img-ct"),
$left = $('.left"),
$right = $('.right'),
$bottomBtn = $('.bottom-btn'),
$items = $('.img-ct').children();
var imgWidth = $ct.children.width(), //獲取每張圖片的寬度，用于到時(shí)候計(jì)算移動
imgCount = $items.length; //獲取輪播框里有多少張圖片
//使用clone()創(chuàng)造邊界
$ct.prepend($item.last().clone()); //克隆最后的元素在最前面
$ct.append($item.first().clone());
newImgCount = $ct.children.length //更新輪播框里有多少張圖片
$ct.css({
left:0-imgWidth, //因?yàn)閯?chuàng)造了邊界，因此需要向左退一格
width:imgWidth*newImgCount // 更新模態(tài)框的新寬度，讓他們在同一排呈現(xiàn)，不然會出現(xiàn)白屏什么的問題
})
//點(diǎn)擊左右換圖片
var curIdx = 0 ;//當(dāng)前的圖片，0是第一張；
var lock = false; //狀態(tài)鎖
//向右
function playNext(idx){
var idx = idx || 1 //如果沒有特別說明是第幾個(gè)就只動1個(gè)
if(!lock){
lock = true;
$ct.animate({left="-=" +(imgWidth*idx)},function(){ // “-=”等于向右偏移，偏移到下一張圖片的位置，也就是需要偏移的那張圖片的寬度,并且寫個(gè)回調(diào)函數(shù)進(jìn)行判斷
curIdx = (curIdx +Idx) %imgCount //利用求余的方式，當(dāng)curIdx ===0 也就是到邊界，直接改變css
if(curIdx === 0){
$ct.css({left:0-imgWidth}) //第一張圖的位置
curIdx = 0;//歸0，從第一張開始
}
lock =false
setItem();
})
}
}
//向左
function playPre(idx){
var idx = idx || 1;
if(!lock){
lock = true;
$ct.animate({left:"+="+(imgWidth * idx),function(){ //"+="向左偏移
curIdx = (imgCount + curIdx - idx) % imgCount ;
if (curIdx === (imgCount -1){
$ct.css({left:0-imgWidth*imgCount})
}
lock = false;
setItem();
})
}
}
//下欄按鈕變色
function setItem(){ $nav.find('li').removeClass('active').eq(curIdx).addClass('active')}
//下欄按鈕選取輪播第幾張圖片
$nav.find('li').on('click',function(){ //按第幾個(gè)就去第幾個(gè)
var idx = $(this).index();
if(idx > curIdx){
playNext(idx-curIdx);
}
else if(idx < curIdx) {
playPre(curIdx-idx);
}
//事件綁定
$right.on('click',function(){
playNext();
})
$left.on('click',function(){
playPre();
})
這樣，我們就能把輪播完成了，主要掌握移動輪播框和clone首尾元素作邊界的思路就能實(shí)現(xiàn)
