<!DOCTYPE html><html><head> <title>輪播圖</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{margin-left: 300px;margin-top: 300px;position: relative;width: 800px;height: 200px;} ul{width: 800px;height: 200px;overflow: hidden;} ul img{width: 800px;height: 200px;} li{list-style: none;} ol{position: absolute;left: 35%;top: 80%;} ol li{width: 20px;height: 20px;border-radius: 10px;float: left;margin-left: 30px;background: #fff;} .active{background: orange;} </style> <script type="text/javascript"> window.onload=function(){ var ul=document.getElementsByTagName('ul')[0]; var uli=ul.getElementsByTagName('li'); var ol=document.getElementsByTagName('ol')[0]; var oli=ol.getElementsByTagName('li'); function startMove(obj){ var op=obj.style.opacity; obj.style.opacity=op+0.1; } for (var i = 0; i < oli.length; i++) { oli[i].index=i; oli[i].onmouseover=function() { for (var i = 0; i < oli.length; i++) { oli[i].className=' '; uli[i].style.display='none'; uli[i].style.opacity=0; uli[i].style.filter='alpha(opacity:0)'; } this.className='active'; uli[this.index].style.display='block'; uli[this.index].style.opacity=0; setInterval(startMove(uli[this.index]),50); console.log(uli[this.index].style.opacity); } } } </script></head><body><div id="box"> <ul> <li style="display: block"><img src="images/ad1.jpg"></li> <li><img src="images/ad2.jpg"></li> <li><img src="images/ad3.jpg"></li> <li><img src="images/ad4.jpg"></li> </ul> <ol> <li class="active"></li> <li></li> <li></li> <li></li> </ol></div></body></html>
麻煩大神看看為什么透明度動畫運行不了?
慕哥6327088
2017-03-26 14:08:24
