在頁面中寫好結(jié)構(gòu)和樣式（根據(jù)情況而定）
十多年的海興網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整海興建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“海興網(wǎng)站設(shè)計(jì)”,“海興網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
?
外層用一個(gè)$(function(){})函數(shù)包裹起來，代表等頁面的內(nèi)容加載完成后再去執(zhí)行jquery的功能代碼。
?
獲取到包裹ul，li的大盒子元素：const $div = $('#div');和包裹圖片的ul元素：$ul = $div.children('ul');再獲取到包裹圖片的每個(gè)li元素：$imgs = $ul.children();再獲取到li的所有長(zhǎng)度，因?yàn)楹竺嫖覀円猚lone第一張到最后一張，所以不用具體的數(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è)變量來記錄輪播圖的運(yùn)動(dòng)狀態(tài)
var ismove = false（運(yùn)動(dòng)狀態(tài)默認(rèn)為false）、
?
開始做之前，我們需要知道一件事，就是當(dāng)我們點(diǎn)到第五張的時(shí)候，如果直接跳回第一張，肯定會(huì)給到用戶不好的體驗(yàn)，所以，此時(shí)，我們應(yīng)該把第一張clone，放到最后一張后面，讓兩張相同的圖片來進(jìn)行跳轉(zhuǎn)，這樣其實(shí)我們是使用了一個(gè)障眼法來迷惑了用戶。
$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)備工作做好了之后，我們要開始創(chuàng)建下面的小按鈕
??for(var i = 0; i ??$('
??}
因?yàn)樵赾ss中寫好了樣式，創(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(){
???
???})
添加好之后我們要開始在里面寫內(nèi)容了,還記得上面的ismove =false嗎，其實(shí)每個(gè)事件都要加上這個(gè)代碼，不過要進(jìn)行判斷，如果在動(dòng)的時(shí)候，就停止下面的代碼運(yùn)行，停止的時(shí)候，就為true，讓代碼動(dòng)起來。
$btns.on('click',function(){
if（ismove）return；
ismove = true；
})
做好上一步之后，我們還要用之前聲明的index = 0，lastindex =0，來存儲(chǔ)我們點(diǎn)擊的時(shí)候的上一個(gè)和下一個(gè)的索引，這樣就不用把五個(gè)事件都加進(jìn)來清空了，
$btns.on('click,function(){
if(ismove) return;
ismove =true;
//可以把這一步理解為，把現(xiàn)任變成前任，
//再給現(xiàn)任賦值他當(dāng)前的索引
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)控制好了點(diǎn)擊的狀態(tài)，不會(huì)讓他“暴躁”，也獲取了下一個(gè)和上一個(gè)li的索引，并給當(dāng)前的li添加了’ac‘和上一個(gè)li移出’ac‘，那么接下來，就是讓它動(dòng)起來了?。?！其實(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，肯定有人問，為什么不在left前加符號(hào)，因?yàn)閘eft是一個(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é)束之后沒什么事干，就可以不用寫回調(diào)函數(shù)
???})
???})
到此，我們下面的小圖標(biāo)的運(yùn)動(dòng)輪播圖的切換就算完成了?。。?/p>
接下來，我們要寫的是向右點(diǎn)擊的大箭頭切換。
其實(shí)上面也說了一些思路，這里我直接寫一點(diǎn)
???$('#goNext').on('click',function(){ //XM http://www.xmchinese.com/
???if(ismove) ?return
???ismove = true
???lastindex = index
???index++
???})
上面的開頭，看起來其實(shí)很熟悉，對(duì)吧，接下來，其實(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')
?
})
接下來，我們需要做的是向左點(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è)輪播圖停止，離開時(shí)繼續(xù)自動(dòng)播放。
???div1.hover(() => {
???????clearInterval($div1.timer)
?????}, (function auto () {
???????$div1.timer = setInterval(() => {
?????????$('#goNext').trigger('click')
???????}, 3000)
???????return auto
?????})())
???})
???
到這里，我們的輪播圖就算是完成了?。?！
?
?
重慶分公司
重慶分公司
