最简单的轮播广告(原生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>

 

posted @ 2015-12-17 23:26  逗伴不是瓣  阅读(4631)  评论(18)  编辑  收藏  举报