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

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

         本文給大家分享的是使用原生的js和jQuery2種方法，分別實現圖片輪播的淡入淡出效果的代碼，非常實用，也方便小伙伴們對比分析，希望對大家學習js和jq能夠有所幫助。

　　圖片輪播有很多種方式，這裡采用其中的 淡入淡出形式

　　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結構

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div class="wrapper"><!-- 最外層部分 --> <div class="banner"><!-- 輪播部分 --> <ul class="imgList"><!-- 圖片部分 --> <li class="imgOn"><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li> <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li> <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li> <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li> <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li> </ul> <div class="bg"></div> <!-- 圖片底部背景層部分--> <ul class="infoList"><!-- 圖片左下角文字信息部分 --> <li class="infoOn">puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class="indexList"><!-- 圖片右下角序號部分 --> <li class="indexOn">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>

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

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

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

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <style type="text/css"> body,div,ul,li,a,img{margin: 0;padding: 0;} ul,li{list-style: none;} a{text-decoration: none;} .wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;} .banner{width: 400px;height: 200px;overflow: hidden;} .imgList{width:400px;height:200px;z-index: 10;} .imgList li{display: none;} .imgList .imgOn{display: inline;} .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;} .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;} .infoList li{display: none;} .infoList .infoOn{display: inline;color: white;} .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;} .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;} .indexList .indexOn{background: red;font-weight: bold;color: white;} </style>

　　說明一下：

　　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.默認會自動輪播，所以默認給其添加

　　?

1 2 3 4 5 6 7 8 9 var autoChange = setInterval(function(){ if(curIndex < $(".imgList li").length-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500);

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

　　3.其中changeTo()函數切換

　　?

1 2 3 4 5 function changeTo(num){ $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn"); $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn"); $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn"); }

　　看著辦吧..

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

　　?