最簡單的輪播廣告(原生JS)

改變每個圖片的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>