原生js和jquery實現圖片輪播特效_jquery

（1）首先是頁面的結構部分

對于我這種左右切換式

1.首先是個外圍部分（其實也就是最外邊的整體wrapper)

2.接著就是你設置圖片輪播的地方（也就是一個banner吧）

3.然后是一個圖片組（可以用新的div 也可以直接使用 ul-->li形式）

4.然后是圖片兩端的左箭頭和右箭頭
5.然后是一個透明背景層，放在圖片底部

6.然后是一個圖片描述info層，放在透明背景層的左下角（div 或 ul-->li)

7.然后是一個按鈕層，用來定位圖片組的index吧,放在透明背景層的右下角(div 或 ul-->li)

由此，可以先構造出html結構

 
 
 

 

 

 

 

 
 
 
 
 
 
puss in boots1
 
puss in boots2
 
puss in boots3
 
puss in boots4
 
puss in boots5
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 

相對于之前，知識增多了兩個箭頭img標簽

（2）CSS樣式部分（圖片組的處理）跟淡入淡出式就不一樣了

淡入淡出只需要顯示或者隱藏對應序號的圖片就行了，直接通過display來設定

左右切換式則是采用圖片li 浮動，父層元素ul 總寬為總圖片寬，并設定為有限banner寬度下隱藏超出寬度的部分

然后當想切換到某序號的圖片時，則采用其ul 定位 left樣式設定相應屬性值實現

比如顯示第一張圖片初始定位left為0px, 要想顯示第二張圖片則需要left:-400px 處理

（3）頁面基本已經構建好久可以進行js的處理了

一、jQuery方式

照常先說jq處理

1.全局變量等

2.自動切換定時器處理

3.為左右箭頭添加事件處理

左箭頭

右箭頭

其中autoChangeAgain()就是一個重置定時器函數

其中changeTo()就是一個圖片切換的處理函數

每傳入一個圖片序號，則按理進行goLeft

4.為右下角的那幾個li 按鈕綁定事件處理

jq就是這樣，簡便，原生代碼量就有些多了

完整代碼

 
 
 
 

 

 

 

 

 
 
 
 
 
 
puss in boots1
 
puss in boots2
 
puss in boots3
 
puss in boots4
 
puss in boots5
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
 
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生js和jquery實現圖片輪播特效_jquery

原生js和jquery實現圖片輪播特效_jquery: （1）首先是頁面的結構部分 對于我這種左右切換式 1.首先是個外圍部分（其實也就是最外邊的整體wrapper) 2.接著就是你設置圖片輪播的地方（也就是一個banner吧） 3.然后是一個圖片組（可以用新的div 也可以直接使用 ul-->li形式） 4.然后是圖片兩端的

推薦度：

點擊下載本文 文檔為doc格式