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

在頁面中寫好結構和樣式（根據(jù)情況而定）

十多年的海興網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整海興建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“海興網(wǎng)站設計”,“海興網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

?

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

?

獲取到包裹ul，li的大盒子元素：const $div = $('#div');和包裹圖片的ul元素：$ul = $div.children('ul');再獲取到包裹圖片的每個li元素：$imgs = $ul.children();再獲取到li的所有長度，因為后面我們要clone第一張到最后一張，所以不用具體的數(shù)字，為：const len = $imgs.length;此外還需再獲取到一個li的寬度，為：const width = $imgs.eq(0).outerwidth()

?

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

var lastindex = 0

?

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

var ismove = false（運動狀態(tài)默認為false）、

?

開始做之前，我們需要知道一件事，就是當我們點到第五張的時候，如果直接跳回第一張，肯定會給到用戶不好的體驗，所以，此時，我們應該把第一張clone，放到最后一張后面，讓兩張相同的圖片來進行跳轉，這樣其實我們是使用了一個障眼法來迷惑了用戶。

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

?

把第一張克隆放到最后一張后，我們就緊接著去計算所有的li的長度。因為這時的長度，才是真正我們想要的長度。

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

?

其實這兩句完全可以寫為一句。

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

?

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

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

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

??}

因為在css中寫好了樣式，創(chuàng)建好了之后會到之前寫好的位置當中，i+1的意思是按鈕的內容，會按1，2，3，4，5…排列好，這也會讓第一個小按鈕默認為第一個，并具備ac這個樣式。

?

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

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

?

獲取完成之后，要給他添加一個點擊事件，讓他能夠點擊切換

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

???

???})

添加好之后我們要開始在里面寫內容了,還記得上面的ismove =false嗎，其實每個事件都要加上這個代碼，不過要進行判斷，如果在動的時候，就停止下面的代碼運行，停止的時候，就為true，讓代碼動起來。

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

if（ismove）return；

ismove = true；

})

做好上一步之后，我們還要用之前聲明的index = 0，lastindex =0，來存儲我們點擊的時候的上一個和下一個的索引，這樣就不用把五個事件都加進來清空了，

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

if(ismove) return;

ismove =true;

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

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

lastindex = index;

index = $(this).index()

}')

//接下來，我們要移出掉前任的“記憶”，把美好的“記憶”給現(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')

})

接下來，我們既然已經(jīng)控制好了點擊的狀態(tài)，不會讓他“暴躁”，也獲取了下一個和上一個li的索引，并給當前的li添加了’ac‘和上一個li移出’ac‘，那么接下來，就是讓它動起來了！??！其實只需給它添加一個自定義動畫函數(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({

???//這句代碼表示，移動的距離是當前的索引值*width

???//因為是向左移動，所以，用-index，肯定有人問，為什么不在left前加符號，因為left是一個屬性值

???left: -index * width

???}，1000，function（）{

???ismove = false

???//這個是回調函數(shù)，是運動結束之后要去執(zhí)行的代碼，ismove = false，讓本次運動結束，如果運動結束之后沒什么事干，就可以不用寫回調函數(shù)

???})

???})

到此，我們下面的小圖標的運動輪播圖的切換就算完成了?。?！

接下來，我們要寫的是向右點擊的大箭頭切換。
其實上面也說了一些思路，這里我直接寫一點

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

???if(ismove) ?return

???ismove = true

???lastindex = index

???index++

???})

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

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

?

if (ismove) return

?

ismove = true

?

lastindex = index

?

index++

?

if(index === len){

?

index = 0

?

//本次動畫的意義在于，當移動到最后一張時，下標為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')

?

})

接下來，我們需要做的是向左點擊切換的大箭頭
其實向右點擊，我們需要做的是，當點擊到第一張之前時，要讓它跳到最后一張：len - 1，

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

???if(ismove = false)

???ismove ?= true

???lastindex = index

???index--

???//當index小于0，即超出邊界時，讓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')

???})

其實除了以上的東西，我們還要做的一個東西是，當鼠標移入時，這個輪播圖停止，離開時繼續(xù)自動播放。

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

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

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

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

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

???????}, 3000)

???????return auto

?????})())

???})

???

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

?

?

分享名稱：怎么做一個輪播圖?（思路+代碼）
轉載注明：http://muchs.cn/article34/ghsese.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、小程序開發(fā)、標簽優(yōu)化、App設計、網(wǎng)站營銷、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)