改變每個圖片的opacity屬性：來自學友劉斌
素材圖片：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最簡單的輪播廣告</title> 6 <style> 7 body, div, ul, li { 8 margin: 0; 9 padding: 0; 10 } 11 12 ul { 13 list-style-type: none; 14 } 15 16 body { 17 background: #000; 18 text-align: center; 19 font: 12px/20px Arial; 20 } 21 22 #box { 23 position: relative; 24 width: 492px; 25 height: 172px; 26 background: #fff; 27 border-radius: 5px; 28 border: 8px solid #fff; 29 margin: 10px auto; 30 } 31 32 #box .list { 33 position: relative; 34 width: 490px; 35 height: 170px; 36 overflow: hidden; 37 border: 1px solid #ccc; 38 } 39 40 #box .list li { 41 position: absolute; 42 top: 0; 43 left: 0; 44 width: 490px; 45 height: 170px; 46 opacity: 0; 47 transition: opacity 0.5s linear 48 } 49 50 #box .list li.current { 51 opacity: 1; 52 } 53 54 #box .count { 55 position: absolute; 56 right: 0; 57 bottom: 5px; 58 } 59 60 #box .count li { 61 color: #fff; 62 float: left; 63 width: 20px; 64 height: 20px; 65 cursor: pointer; 66 margin-right: 5px; 67 overflow: hidden; 68 background: #F90; 69 opacity: 0.7; 70 border-radius: 20px; 71 } 72 73 #box .count li.current { 74 color: #fff; 75 opacity: 0.7; 76 font-weight: 700; 77 background: #f60 78 } 79 </style> 80 </head> 81 <body> 82 <div id="box"> 83 <ul class="list"> 84 <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li> 85 <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li> 86 <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li> 87 <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li> 88 <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li> 89 </ul> 90 <ul class="count"> 91 <li class="current">1</li> 92 <li class="">2</li> 93 <li class="">3</li> 94 <li class="">4</li> 95 <li class="">5</li> 96 </ul> 97 </div> 98 99 100 <script> 101 var box=document.getElementById('box'); 102 var uls=document.getElementsByTagName('ul'); 103 var imgs=uls[0].getElementsByTagName('li'); 104 var btn=uls[1].getElementsByTagName('li'); 105 var i=index=0; //中間量，統一聲明； 106 var play=null; 107 console.log(box,uls,imgs,btn);//獲取正確 108 109 //圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結、簡單 在css里面 110 function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應 111 for(i=0;i<btn.length;i++ ){ 112 btn[i].className=''; //很容易看懂吧？每個按鈕都先設置成看不見，然后把當前按鈕設置成可見。 113 btn[a].className='current'; 114 } 115 for(i=0;i<imgs.length;i++){ //把圖片的效果設置和按鈕相同 116 imgs[i].style.opacity=0; 117 imgs[a].style.opacity=1; 118 } 119 } 120 //切換按鈕功能，響應對應圖片 121 for(i=0;i<btn.length;i++){ 122 btn[i].index=i; //不知道你有沒有發現，循環里的方法去調用循環里的變量體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住 123 btn[i].onmouseover=function(){ 124 show(this.index); 125 clearInterval(play); //這就是最后那句話追加的功能 126 } 127 } 128 129 //自動輪播方法 130 function autoPlay(){ 131 play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了 132 index++; 133 index>=imgs.length&&(index=0);//可能有優先級問題，所以用了括號，沒時間測試了。 134 show(index); 135 },1000) 136 } 137 autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之后影響到了其他方法，使用autoPlay所以只能這樣調用了 138 139 //div的鼠標移入移出事件 140 box.onmouseover=function(){ 141 clearInterval(play); 142 }; 143 box.onmouseout=function(){ 144 autoPlay(); 145 }; 146 //按鈕下標也要加上相同的鼠標事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。 147 148 </script> 149 </body> 150 </html>