你的位置:首页 > Java教程

[Java教程]最简单的轮播广告(原生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>