怎么做一個(gè)輪播圖?（思路+代碼）

在頁(yè)面中寫好結(jié)構(gòu)和樣式（根據(jù)情況而定）

?

外層用一個(gè)$(function(){})函數(shù)包裹起來(lái)，代表等頁(yè)面的內(nèi)容加載完成后再去執(zhí)行jquery的功能代碼。

?

獲取到包裹ul，li的大盒子元素：const $div = $('#div');和包裹圖片的ul元素：$ul = $div.children('ul');再獲取到包裹圖片的每個(gè)li元素：$imgs = $ul.children();再獲取到li的所有長(zhǎng)度，因?yàn)楹竺嫖覀円?/span>clone第一張到最后一張，所以不用具體的數(shù)字，為：const len = $imgs.length;此外還需再獲取到一個(gè)li的寬度，為：const width = $imgs.eq(0).outerwidth()

?

需要聲明兩個(gè)變量記錄下一張和上一張的狀態(tài)，var index = 0

var lastindex = 0

?

此外，為了防止后面用戶點(diǎn)得太快，輪播圖出現(xiàn)bug，需要聲明一個(gè)變量來(lái)記錄輪播圖的運(yùn)動(dòng)狀態(tài)

var ismove = false（運(yùn)動(dòng)狀態(tài)默認(rèn)為false）、

?

開(kāi)始做之前，我們需要知道一件事，就是當(dāng)我們點(diǎn)到第五張的時(shí)候，如果直接跳回第一張，肯定會(huì)給到用戶不好的體驗(yàn)，所以，此時(shí)，我們應(yīng)該把第一張clone，放到最后一張后面，讓兩張相同的圖片來(lái)進(jìn)行跳轉(zhuǎn)，這樣其實(shí)我們是使用了一個(gè)障眼法來(lái)迷惑了用戶。

$imgs.eq(0).clone().appendTo($ul)

?

把第一張克隆放到最后一張后，我們就緊接著去計(jì)算所有的li的長(zhǎng)度。因?yàn)檫@時(shí)的長(zhǎng)度，才是真正我們想要的長(zhǎng)度。

$ul.width((len+1)*width)

?

其實(shí)這兩句完全可以寫為一句。

$ul.append($imgs.eq(0).clone()).width((len+1)*width)

?

以上的準(zhǔn)備工作做好了之后，我們要開(kāi)始創(chuàng)建下面的小按鈕

??for(var i = 0; i <len; i++){

??$('<li>').html(i+1).addclass(i === 0 ? 'ac' : '').appendTo('#div ol')

??}

因?yàn)樵?/span>css中寫好了樣式，創(chuàng)建好了之后會(huì)到之前寫好的位置當(dāng)中，i+1的意思是按鈕的內(nèi)容，會(huì)按1，2，3，4，5…排列好，這也會(huì)讓第一個(gè)小按鈕默認(rèn)為第一個(gè)，并具備ac這個(gè)樣式。

?

把li創(chuàng)建好，并插入到（''#div ol'）中后，這時(shí)我們要獲取這元素

const $btns = $('#div ol li')

?

獲取完成之后，要給他添加一個(gè)點(diǎn)擊事件，讓他能夠點(diǎn)擊切換

???$btns.on('click',function(){

???

???})

添加好之后我們要開(kāi)始在里面寫內(nèi)容了,還記得上面的ismove =false嗎，其實(shí)每個(gè)事件都要加上這個(gè)代碼，不過(guò)要進(jìn)行判斷，如果在動(dòng)的時(shí)候，就停止下面的代碼運(yùn)行，停止的時(shí)候，就為true，讓代碼動(dòng)起來(lái)。

$btns.on('click',function(){

if（ismove）return；

ismove = true；

})

做好上一步之后，我們還要用之前聲明的index = 0，lastindex =0，來(lái)存儲(chǔ)我們點(diǎn)擊的時(shí)候的上一個(gè)和下一個(gè)的索引，這樣就不用把五個(gè)事件都加進(jìn)來(lái)清空了，

$btns.on('click,function(){

if(ismove) return;

ismove =true;

//可以把這一步理解為，把現(xiàn)任變成前任，

//再給現(xiàn)任賦值他當(dāng)前的索引

lastindex = index;

index = $(this).index()

}')

//接下來(lái)，我們要移出掉前任的“記憶”，把美好的“記憶”給現(xiàn)任

$btns.on('click',function(){

if(ismove) return

ismove = true

lastindex = index

index = $(this).index()

$btns.eq(lastindex).removeclass('ac')

$btns.eq(index).addclass('ac')

})

接下來(lái)，我們既然已經(jīng)控制好了點(diǎn)擊的狀態(tài)，不會(huì)讓他“暴躁”，也獲取了下一個(gè)和上一個(gè)li的索引，并給當(dāng)前的li添加了’ac‘和上一個(gè)li移出’ac‘，那么接下來(lái)，就是讓它動(dòng)起來(lái)了！?。∑鋵?shí)只需給它添加一個(gè)自定義動(dòng)畫函數(shù)即可~~~

???$btns.on('click',function(){

???if(ismove) return

???ismove = true

???lastindex = index

???index = $(this).index()

???$btns.eq(lastindex).removeclass('ac')

???$btns.eq(index).addclass('ac')

???$ul.animate({

???//這句代碼表示，移動(dòng)的距離是當(dāng)前的索引值*width

???//因?yàn)槭窍蜃笠苿?dòng)，所以，用-index，肯定有人問(wèn)，為什么不在left前加符號(hào)，因?yàn)?/span>left是一個(gè)屬性值

???left: -index * width

???}，1000，function（）{

???ismove = false

???//這個(gè)是回調(diào)函數(shù)，是運(yùn)動(dòng)結(jié)束之后要去執(zhí)行的代碼，ismove = false，讓本次運(yùn)動(dòng)結(jié)束，如果運(yùn)動(dòng)結(jié)束之后沒(méi)什么事干，就可以不用寫回調(diào)函數(shù)

???})

???})

到此，我們下面的小圖標(biāo)的運(yùn)動(dòng)輪播圖的切換就算完成了?。。?/span>

接下來(lái)，我們要寫的是向右點(diǎn)擊的大箭頭切換。
其實(shí)上面也說(shuō)了一些思路，這里我直接寫一點(diǎn)

???$('#goNext').on('click',function(){ //XM http://www.xmchinese.com/

???if(ismove) ?return

???ismove = true

???lastindex = index

???index++

???})

上面的開(kāi)頭，看起來(lái)其實(shí)很熟悉，對(duì)吧，接下來(lái)，其實(shí)我們要做的就是點(diǎn)擊的時(shí)候，當(dāng)點(diǎn)到了最后一張，不是出現(xiàn)空白，而是讓他跳轉(zhuǎn)到第一張，并且下面的小按鈕也跟著改變。

$('#goNext').on('click',function(){

?

if (ismove) return

?

ismove = true

?

lastindex = index

?

index++

?

if(index === len){

?

index = 0

?

//本次動(dòng)畫的意義在于，當(dāng)移動(dòng)到最后一張時(shí)，下標(biāo)為len，讓ul瞬間回到0的位置

?

$ul.stop().animate({

?

left = -len*width

?

},1000,function(){

?

//用css（'left',0）可以讓它回到初始位置

?

$ul.css('left',0)

?

ismove = false

?

})

?

}else{

?

$ul.stop().animate({

?

left = -index*width;

?

},1000,function(){

?

ismove = false

?

})

?

}

?

$btns.eq(lastindex).removeclass('ac')

?

$btns.eq(index).addclass('ac')

?

})

接下來(lái)，我們需要做的是向左點(diǎn)擊切換的大箭頭
其實(shí)向右點(diǎn)擊，我們需要做的是，當(dāng)點(diǎn)擊到第一張之前時(shí)，要讓它跳到最后一張：len - 1，

???$('#goPrev').on('click',function(){

???if(ismove = false)

???ismove ?= true

???lastindex = index

???index--

???//當(dāng)index小于0，即超出邊界時(shí)，讓index = len - 1

???if(index < 0){

???index = len - 1

???$ul.css('left',-len * width).animate({

???left = -index * width

???},1000,function(){

???ismove = false

???})

???}else{

???$ul.animate({

???left = -index*width

???},1000,function(){

???ismove = false

???})

???}

???$btns.eq(lastindex).removeclass('ac')

???$btns.eq(index).addclass('ac')

???})

其實(shí)除了以上的東西，我們還要做的一個(gè)東西是，當(dāng)鼠標(biāo)移入時(shí)，這個(gè)輪播圖停止，離開(kāi)時(shí)繼續(xù)自動(dòng)播放。

???div1.hover(() => {

???????clearInterval($div1.timer)

?????}, (function auto () {

???????$div1.timer = setInterval(() => {

?????????$('#goNext').trigger('click')

???????}, 3000)

???????return auto

?????})())

???})

???

到這里，我們的輪播圖就算是完成了?。?！

?

?