DIV CSS 佈局教程網

 　　原生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.然後當鼠標滑入滑出右下角的下標時也要處理

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(".indexList").find("li").each(function(item){ $(this).hover(function(){ clearInterval(autoChange); changeTo(item); curIndex = item; },function(){ autoChange = setInterval(function(){ if(curIndex < $(".imgList li").length-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); }); });

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

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

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

　　完整代碼

　　?

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播 jq(淡入淡出)</title> <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> </head> <body> <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> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript"> var curIndex = 0; //當前index // alert(imgLen); // 定時器自動變換2.5秒每次 var autoChange = setInterval(function(){ if(curIndex < $(".imgList li").length-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500);   $(".indexList").find("li").each(function(item){ $(this).hover(function(){ clearInterval(autoChange); changeTo(item); curIndex = item; },function(){ autoChange = setInterval(function(){ if(curIndex < $(".imgList li").length-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); }); }); 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"); } </script> </body> </html>

　　二、js原生方式

　　原生方式大致來說就是模擬jquery

　　因為我用了太多的class,所以要增加一些class的處理函數(可以用id，應該會更便捷)

　　通過class名取標簽元素(注意了，因為現在我只針對於標簽有一個class的來說，多個class應該會出錯)

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 //通過class獲取節點 function getElementsByClassName(className){ var classArr = []; var tags = document.getElementsByTagName('*'); for(var item in tags){ if(tags[item].nodeType == 1){ if(tags[item].getAttribute('class') == className){ classArr.push(tags[item]); } } } return classArr; //返回 }

　　模擬jq的addClass和removeClass

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 判斷obj是否有此class function hasClass(obj,cls){ //class位於單詞邊界 return obj.className.match(new RegExp('(s|^)' + cls + '(s|$)')); } //給 obj添加class function addClass(obj,cls){ if(!this.hasClass(obj,cls)){ obj.className += cls; } } //移除obj對應的class function removeClass(obj,cls){ if(hasClass(obj,cls)){ var reg = new RegExp('(s|^)' + cls + '(s|$)'); obj.className = obj.className.replace(reg,''); } }

　　再模擬jq的fadeIn和fadeOut函數

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 //淡入處理函數 function fadeIn(elem){ setOpacity(elem,0); //初始全透明 for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100 (function(){ var level = i * 5; //透明度每次變化值 setTimeout(function(){ setOpacity(elem, level) },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定 })(i); //每次循環變化一次 } }   //淡出處理函數 function fadeOut(elem){ for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100 (function(){ var level = 100 - i * 5; //透明度每次變化值 setTimeout(function(){ setOpacity(elem, level) },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定 })(i); //每次循環變化一次 } }

　　其中設置透明度函數的處理形式

　　?

1 2 3 4 5 6 7 8 //設置透明度 function setOpacity(elem,level){ if(elem.filters){ elem.style.filter = "alpha(opacity="+level+")"; }else{ elem.style.opacity = level / 100; } }

　　然後就是基本部分的用法了

　　先初始化經常用到的變量以及圖片的自動切換

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var curIndex = 0, //當前index imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgArr.length, infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組 indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組 // 定時器自動變換2.5秒每次 var autoChange = setInterval(function(){ if(curIndex < imgLen -1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); //調用添加事件處理 addEvent();

　　其中的changeTo就是處理函數，addEvent就是給右下角的那些按鈕設定事件處理

　　?

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 //變換處理函數 function changeTo(num){ //設置image var curImg = getElementsByClassName("imgOn")[0]; fadeOut(curImg); //淡出當前 image removeClass(curImg,"imgOn"); addClass(imgArr[num],"imgOn"); fadeIn(imgArr[num]); //淡入目標 image //設置image 的 info var curInfo = getElementsByClassName("infoOn")[0]; removeClass(curInfo,"infoOn"); addClass(infoArr[num],"infoOn"); //設置image的控制下標 index var _curIndex = getElementsByClassName("indexOn")[0]; removeClass(_curIndex,"indexOn"); addClass(indexArr[num],"indexOn"); } //給右下角的圖片index添加事件處理 function addEvent(){ for(var i=0;i<imgLen;i++){ //閉包防止作用域內活動對象item的影響 (function(_i){ //鼠標滑過則清除定時器，並作變換處理 indexArr[_i].onmouseover = function(){ clearTimeout(autoChange); changeTo(_i); curIndex = _i; }; //鼠標滑出則重置定時器處理 indexArr[_i].onmouseout = function(){ autoChange = setInterval(function(){ if(curIndex < imgLen -1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); }; })(i); } }

　　如此一來，原生版的也完成了

　　完整代碼

　　?

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播 js原生(淡入淡出)</title> <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> </head> <body> <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> <script type="text/javascript"> var curIndex = 0, //當前index imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgArr.length, infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組 indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組 // 定時器自動變換2.5秒每次 var autoChange = setInterval(function(){ if(curIndex < imgLen -1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); //調用添加事件處理 addEvent();   //給右下角的圖片index添加事件處理 function addEvent(){ for(var i=0;i<imgLen;i++){ //閉包防止作用域內活動對象item的影響 (function(_i){ //鼠標滑過則清除定時器，並作變換處理 indexArr[_i].onmouseover = function(){ clearTimeout(autoChange); changeTo(_i); curIndex = _i; }; //鼠標滑出則重置定時器處理 indexArr[_i].onmouseout = function(){ autoChange = setInterval(function(){ if(curIndex < imgLen -1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },2500); }; })(i); } } //變換處理函數 function changeTo(num){ //設置image var curImg = getElementsByClassName("imgOn")[0]; fadeOut(curImg); //淡出當前 image removeClass(curImg,"imgOn"); addClass(imgArr[num],"imgOn"); fadeIn(imgArr[num]); //淡入目標 image //設置image 的 info var curInfo = getElementsByClassName("infoOn")[0]; removeClass(curInfo,"infoOn"); addClass(infoArr[num],"infoOn"); //設置image的控制下標 index var _curIndex = getElementsByClassName("indexOn")[0]; removeClass(_curIndex,"indexOn"); addClass(indexArr[num],"indexOn"); }   //設置透明度 function setOpacity(elem,level){ if(elem.filters){ elem.style.filter = "alpha(opacity="+level+")"; }else{ elem.style.opacity = level / 100; } }   //淡入處理函數 function fadeIn(elem){ setOpacity(elem,0); //初始全透明 for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100 (function(){ var level = i * 5; //透明度每次變化值 setTimeout(function(){ setOpacity(elem, level) },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定 })(i); //每次循環變化一次 } }   //淡出處理函數 function fadeOut(elem){ for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100 (function(){ var level = 100 - i * 5; //透明度每次變化值 setTimeout(function(){ setOpacity(elem, level) },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定 })(i); //每次循環變化一次 } }   //通過class獲取節點 function getElementsByClassName(className){ var classArr = []; var tags = document.getElementsByTagName('*'); for(var item in tags){ if(tags[item].nodeType == 1){ if(tags[item].getAttribute('class') == className){ classArr.push(tags[item]); } } } return classArr; //返回 }   // 判斷obj是否有此class function hasClass(obj,cls){ //class位於單詞邊界 return obj.className.match(new RegExp('(s|^)' + cls + '(s|$)')); } //給 obj添加class function addClass(obj,cls){ if(!this.hasClass(obj,cls)){ obj.className += cls; } } //移除obj對應的class function removeClass(obj,cls){ if(hasClass(obj,cls)){ var reg = new RegExp('(s|^)' + cls + '(s|$)'); obj.className = obj.className.replace(reg,''); } }   </script> </body> </html>

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。