效果圖如下：
源碼放在Github上了：
我是源碼
我是效果預(yù)覽
基本功能：
- 四張圖片循環(huán)播放虱颗；
- 無操作時(shí)自動(dòng)從左到右播放；
- 鼠標(biāo)放在輪播圖上時(shí)停止自動(dòng)輪播蔗喂，顯示左右按鈕忘渔；
- 按左按鈕，會(huì)顯示左邊的圖片缰儿，按右按鈕會(huì)顯示右邊的圖片畦粮；
- 鼠標(biāo)移出后，又從當(dāng)前開始自動(dòng)播放乖阵；
- 隨著圖片的移動(dòng)宣赔，下方的小長(zhǎng)條也會(huì)跟著移動(dòng)；
- 點(diǎn)擊任意長(zhǎng)條义起，會(huì)直接跳轉(zhuǎn)至長(zhǎng)條對(duì)應(yīng)的圖片拉背。
原理介紹
圖片從右往左或者從左往右的切換很容易理解，難點(diǎn)在于如何實(shí)現(xiàn)循環(huán)播放默终。下面就講解循環(huán)播放的原理：
-
將要展示的圖片依次水平排列椅棺，本例一共要展示4副圖片
Paste_Image.png -
我們將要展示的圖片放置在可視窗口，其它圖片隱藏掉（背景色改為灰色齐蔽，代表隱藏）
Paste_Image.png -
由于可視窗口的位置是不能調(diào)整的含滴，所以我們通過整體的向左或向右移動(dòng)4副圖片來達(dá)到圖片切換的目的谈况。
Paste_Image.png -
但是當(dāng)窗口移動(dòng)到第一張圖片上時(shí)，再往左切換就沒有圖片了缎脾，同樣最后一張圖片再往右切換也就沒有圖片了遗菠。但是我們的目的是到1號(hào)圖片后再往左移動(dòng)是4號(hào)圖片辙纬，再往左是3號(hào)……一直循環(huán)贺拣，到4號(hào)圖片再往右是1號(hào)圖纵柿，再往右是2號(hào)圖……一直循環(huán)。
Paste_Image.png
Paste_Image.png 為了達(dá)到上述目的委可，我們必須做些手腳了着倾！變化就是卡者，在1號(hào)圖左邊加了一張4號(hào)圖崇决，再4號(hào)圖右邊加了一張1號(hào)圖恒傻。
- 是時(shí)候上演魔術(shù)戲法了盈厘！
這時(shí)當(dāng)我們從1號(hào)圖往左切換時(shí)沸手，左邊就有了一張可供使用的4號(hào)圖替身，我們就可以營(yíng)造一種又回到了4號(hào)圖的假象跳仿。
這樣就毫無違和感了，但是如果用戶繼續(xù)向左拉動(dòng)怎么辦谨究？難不成再造一個(gè)3號(hào)圖替身泣棋？當(dāng)然不是潭辈，當(dāng)從1切換到
4'這個(gè)動(dòng)畫執(zhí)行完畢后把敢，我們需要將4'瞬間切換到4修赞，因?yàn)槭撬查g柏副，中間是沒有緩慢的動(dòng)畫效果的，所以肉眼是感覺不到的眷篇，所以用戶其實(shí)毫無察覺蕉饼，但事實(shí)上我們已經(jīng)變成下圖了椎椰。
這時(shí)候如果用戶接著向左移動(dòng)慨飘，4號(hào)圖是不是就可以接上3號(hào)圖了呢休弃！
向右拉的道理也是一樣的圈膏，當(dāng)?shù)竭_(dá)
1'后稽坤，我們要瞬間在換回1尿褪。原理就是這樣了，下面開始分析代碼顿仇。
代碼實(shí)現(xiàn)
HTML+CSS
輪播的4張圖片放在ul的li里面臼闻，并利用浮動(dòng)使他們?cè)谝慌懦尸F(xiàn)（記得清除浮動(dòng)哦）囤采，前面的4號(hào)圖的復(fù)制品和后面的1號(hào)圖復(fù)制品是通過js添加上去的蕉毯，現(xiàn)在還沒有恕刘，但是也可以提前在html中寫好褐着，都一樣托呕。
設(shè)置父容器的大小剛好等于一張圖片的大小馅扣，并且設(shè)置
overflow：hidden將不顯示的圖片都隱藏掉（記得為父容器加上可愛的圓角）着降。
利用兩個(gè)a鏈接做出按鈕的樣式蓄喇，使用絕對(duì)定位將他們放到合適的地方妆偏。
再利用下面的ul中的li做出滾動(dòng)條的效果，使用絕對(duì)定位將他們放到合適的地方叔锐。
靜態(tài)效果就做好了，接下來開始寫JS张吉，讓輪播具有靈魂。
JS
注：JS使用了jquery
首先在放置圖片的ul里面添加我們的備用圖片4'和1'勺择∈『耍克隆4和1并將4放在列表的頭部气忠，將1放在列表的尾部旧噪。
var $page0 = $pages.eq(0).clone();
var $page3 = $pages.eq(3).clone();
$content.append($page0);
$content.prepend($page3);
為按鈕添加點(diǎn)擊事件脓匿，點(diǎn)擊按鈕可以使圖片向左或向右移動(dòng)陪毡。$btnPre顯示左邊的圖片（例如：當(dāng)前為2，點(diǎn)擊后切換至1）铁瞒，$btnNext顯示右邊的圖片（例如：當(dāng)前是2慧耍，點(diǎn)擊切換至3）蜂绎。stateLock防止用戶在一個(gè)切換動(dòng)畫沒完成時(shí)進(jìn)行過多的點(diǎn)擊。play()函數(shù)是執(zhí)行左右切換動(dòng)畫的函數(shù)怪瓶，可以向左也可以向右践美。
$btnPre.on("click",function(){
if(!stateLock) return;
stateLock = false;
play($content,true);
});
$btnNext.on("click",function(){
if(!stateLock) return;
stateLock = false;
play($content,false)
});
為底部滾動(dòng)條添加點(diǎn)擊事件敛滋。當(dāng)點(diǎn)擊滾動(dòng)條時(shí)绎晃，要做兩件事杂曲，一是將當(dāng)前圖片切換到滾動(dòng)條對(duì)應(yīng)的圖片擎勘，二是改變點(diǎn)擊的滾動(dòng)條的顏色棚饵，并將其他滾動(dòng)條恢復(fù)默認(rèn)色噪漾。
//底部長(zhǎng)條添加點(diǎn)擊事件
$(".carousel").on("click","li",function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
var liIndex = $(this).index();
if(liIndex>pageIndex){
play($content,false,liIndex-pageIndex);
}else if(liIndex<pageIndex){
play($content,true,pageIndex-liIndex);
}
});
添加自動(dòng)播放功能夺刑。每過2.5秒就自動(dòng)向右切換一張分别。
var auto1 = setInterval(function () {
play($content,false);
},2500);
為插件整體添加鼠標(biāo)移入移出事件耘斩。鼠標(biāo)移入時(shí)括授，做兩件事荚虚，一是關(guān)閉自動(dòng)播放功能梯澜，二是顯示向左向右的按鈕（其實(shí)在css樣式中渴析，這兩個(gè)按鈕是被隱藏掉的俭茧，上面說的顯示出來，是為了讓大家看清楚）午磁；鼠標(biāo)移出后迅皇，也做兩件事喧半，但是相反挺据，打開自動(dòng)播放功能扁耐，然后隱藏按鈕婉称。
//顯示按鈕
$wrapper.on({
mouseover:function () {
clearInterval(auto1);
$btnNext.show();
$btnPre.show();
},
mouseout:function () {
auto1 = setInterval(function () {
play($content,false);
},2500);
$btnNext.hide();
$btnPre.hide();
}
});
播放函數(shù)王暗，傳入三個(gè)參數(shù)俗壹，$obj是6張圖片所在的父容器的jquery對(duì)象绷雏，dir是移動(dòng)方向（true是向前移動(dòng)，false是向后移動(dòng)）涎显，len是一次移動(dòng)的圖片張數(shù)坤检，默認(rèn)是1張。移動(dòng)的原理其實(shí)是改變父容器整體的絕對(duì)定位參數(shù)期吓，然后利用animate方法添加動(dòng)畫效果早歇。最后當(dāng)圖片移動(dòng)后不能忘記改變其對(duì)應(yīng)的滾動(dòng)條的背景色。
function play($obj,dir,len) {
//dir ：true 向前/false 向后
if(len===undefined||len===null){
len=1;
}
var symbol = dir?"+=":"-=";
var backFlag = dir?-1:4;
var clear = dir?3:0;
var backIndex = dir?4:1;
$obj.animate({
left:symbol+len*pageWidth+"px"
},function () {
if(dir){
pageIndex -=len;
console.log(pageIndex);
if(pageIndex<backFlag+1){
pageIndex = clear;
$obj.css({
left:"-"+backIndex*pageWidth+"px"
})
}
}else{
pageIndex +=len;
console.log(pageIndex);
if(pageIndex>backFlag-1){
pageIndex = clear;
$obj.css({
left:"-"+backIndex*pageWidth+"px"
})
}
}
$carousels.eq(pageIndex).siblings().removeClass("active");
$carousels.eq(pageIndex).addClass("active");
stateLock = true;
})
}
版權(quán)歸饑人谷和本人所有膘婶，轉(zhuǎn)載請(qǐng)注明出處
