1、02 接下來(lái)我們需要導(dǎo)入腳本文件，注意先導(dǎo)入Jquery文件，然后導(dǎo)入bootstrap的腳本文件，順序一定不能顛倒，如下圖所示 03 然后在body標(biāo)簽里定義輪播圖的容器，容器的大小需要和圖片的大小一樣，否則會(huì)出現(xiàn)輪播圖錯(cuò)位，效果如下圖所示；我自己寫(xiě)的BS輪播加手勢(shì)滑動(dòng)，引入了一個(gè)插件，直接看代碼吧引入插件JS代碼$documentreadyfunction手勢(shì)右滑 回到上一個(gè)畫(huà)面$#39#myCarousel#39bind#39swiperight swiperightup swiperightdown#39，function；可以參考下面的daima 3個(gè)div的統(tǒng)一class = #39div#39var index =03秒輪播一次 var timer = setIntervalfunction index = index == 2 ？ 0 index + 1某個(gè)div顯示，其他的隱藏 quotdivquothide；圖片輪播的話，有兩種方式1 通過(guò)js控制圖片的顯隱來(lái)實(shí)現(xiàn)輪播實(shí)現(xiàn)簡(jiǎn)單通過(guò)定時(shí)器切換圖片這種方式我博客里有關(guān)鍵代碼，可以百度以下內(nèi)容查看使用javascript，jquery實(shí)現(xiàn)的圖片輪播功能xyytIT2 通過(guò)定位方式，使圖片；如圖所示3這里是css文件代碼，上面是div和圖片顯示的效果代碼，后面是動(dòng)畫(huà)效果4這里是事件，這里定義了四個(gè)時(shí)間段的狀態(tài)，兼容了ie的5如圖所示這里是效果圖，會(huì)根據(jù)時(shí)間輪播顯示下一張圖片 了；自己加五張圖片，然后lt！doctype html lt！聲明當(dāng)前頁(yè)面的編碼集charset=gbk，gb2312中文編碼，utf8國(guó)際編碼 lt！當(dāng)前頁(yè)面的三要素 騰訊課堂專業(yè)的在線教育平臺(tái) lt！css，js margin；* $#39lieq0#39mouseenterfunction $thiscss#39background#39，#39red#39 $#39lieq0#39mouseoutfunction $thiscss#39background#39，#39#39 * $#39li#39hoverfunction * css#39backgrou。

2、if$index === 0 當(dāng)前為第一張輪播圖 quotbanquoteq$quotbanquotlength1addClassquotactivesiblingsquotbanquotremoveClassquotactivequot這里寫(xiě)成你自動(dòng)切換的代碼，我這里只是一個(gè)無(wú)動(dòng)態(tài)切換效果的方法。

3、需要一個(gè)固定寬高的div，然后將圖片放進(jìn)div里面，設(shè)置定時(shí)器，每次根據(jù)圖片下標(biāo)都向左或向右移動(dòng)一個(gè)圖片寬度的距離，輪播到最后一個(gè)的時(shí)候?qū)⑾聵?biāo)變成第一個(gè)圖片的下標(biāo)，就可以實(shí)現(xiàn)了；1輪播圖片2css和html代碼部分3輪播js代碼部分 下面的可以參考lt！DOCTYPE html Document；動(dòng)畫(huà)效果，圖片從右側(cè)飛入 quot#div_pic ul liquoteqindexanimateleftquot0quot，500 * 下面是可配置輪播動(dòng)畫(huà)代碼 fnslide=functionoptions var defaults= affect1， 1上下滾動(dòng)。

4、3簡(jiǎn)單的代碼示例如下lt！DOCTYPE html jquery輪播效果圖 * padding 0px margin 0px a textdecoration ul liststyle outside slider， sl；輪播控制器JavaScript，這段js引入需要jQuery的支持，所以先引入它 functionwin，doc，undefined var zturn=functionturn thisturn=turn thiszturn=$quot#quot+turnid thisX=0 thiszturnitem=quotztu；setInterval 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval 被調(diào)用或窗口被關(guān)閉由 setInterval 返回的 ID 值可用作 clearInterval 方法的參數(shù)語(yǔ)法 setIntervalcode，milliseccode 要調(diào)用的函數(shù)或要執(zhí)行的代碼串；移動(dòng)端觸屏滑動(dòng)的效果其實(shí)就是圖片輪播，在PC的頁(yè)面上很好實(shí)現(xiàn)，綁定click和mouseover等事件來(lái)完成但是在移動(dòng)設(shè)備上，要實(shí)現(xiàn)這種輪播的效果，就需要用到核心的touch事件處理touch事件能跟蹤到屏幕滑動(dòng)的每根手指以下是四種。