原生js和jquery實現圖片輪播淡入淡出效果_jquery

js原生和jQuery都可以實現，jquery因為封裝了很多用法，所以用起來就簡單許多，轉換成js使用，其實也就是用js原生模擬出這些用法。

但不管怎樣，構造一個最基本的表現層是必須的

簡單的圖片輪播一般由幾個部分構成。

對于淡入淡出式

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

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

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

4.然后是一個透明背景層，放在圖片底部

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

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

7.當然了，有些時候還在圖片兩端放兩個箭頭 < 和 > ,指示圖片輪播方向（這里先不用，如果要使用也同理）

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

 
 
 

 

 

 

 

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

圖片部分的alt說明即為infoList部分的信息內容，有些時候就可以綁定一下下。要注意的是，imgList中圖片的寬度和高度最后馬上設定，如果在css中才統一設定會變慢一些。

我給三個部分的active都添加的對應的on類，實際使用的時候可能不需要那么多active

接下來給它設置一下css樣式

說明一下：

1、banner即為圖片輪播的范圍，這里設定為寬400高200，圖片的ul外圍也如此設置。

2、要顯示active項，所以先統一所有li設置display:none,再添加個on類設置 display:inline

3、因為當使用jquery的fadeIn()時，是變化為display:list-item,所以要在banner那里加上overflow:hidden ,不然如果快速切換圖片的話，整體圖片高度會超出所給的高度。

4、要注意給每個部分添加 z-index值，防止被覆蓋無法展現出來的現象

寫到這里，先檢查一下頁面是否已經正確顯示出第一項。如果已經顯示好，再增添js處理部分。

一、jQuery方式

1.有一個當前圖片對應的標號 curIndex = 0;

2.默認會自動輪播，所以默認給其添加

默認curIndex自增,之后重置為0

3.其中changeTo()函數切換

看著辦吧..

4.然后當鼠標滑入滑出右下角的下標時也要處理

滑入清除定時器，并進行圖片切換處理。然后設置curIndex為當前item(這個要注意別忘了)

滑出重置定時器，還原默認狀態了

這樣一來，淡入淡出就完成了。

完整代碼

 
 
 
 

 

 

 

 

 
 
 
 
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:圖片輪播有很多種方式，這里采用其中的 淡入淡出形式 js原生和jQuery都可以實現，jquery因為封裝了很多用法，所以用起來就簡單許多，轉換成js使用，其實也就是用js原生模擬出這些用法。 但不管怎樣，構造一個最基本的表現層是必須的 簡單的圖片輪播一般由幾

推薦度：

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