麻烦大神看看为什么透明度动画运行不了?
<!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>
慕哥63270881回答
-
qq_运着篮球的挨踢侠客丶_0
导致的问题setInterval(startMove,500,uli[this.index]);当然 改完后还有别的问题 op应该设置一个透明度作为全局变量 等
随时随地看视频慕课网APP
相关分类
JavaScript