<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3轮播图特效</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="pic-box" id="pic-box">
<ul id="pic-ul">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
</ul>
<!--底部进度提示-->
<div class="control">
<em class="now"></em>
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
</div>
</div>
<script>
var getbox = document.getElementById("pic-box");
//alert(getbox.nodeName);
var getul = document.getElementById("pic-ul");
//alert(getul.nodeType);
//alert(getul.nodeValue);
//alert(getul.nodeName);
var getem = document.getElementsByTagName("em");
//alert(getem[0].className);
//alert(getem.length);
var index = 0,timer = null;
function autoplay(){
timer = setInterval(function(){
index++;
if(index >= getem.length){
index = 0;
}
changePic(index);
},3000)
}
autoplay();
function changePic(number){
getul.style.marginLeft = -800 * number + "px";
for (var i = 0;i < getem.length;i++) {
getem[i].className = "";
}
getem[number].className = "now";
}
getbox.onmouseout = function(){
autoplay();
}
getbox.onmouseover = function(){
clearInterval(timer);
}
for(var i = 0;i < getem.length;i++){
getem[i].id = i;
getem[i].onmouseover = function(){
changePic(this.id);
}
}
</script>
</body>
</html>里面的getbox.onmouseout = function(){ autoplay()}; 要这样写才有效果,不然下面的onmouseover都会失效可以我以前都是写成getbox.onmouseout = autoplay() 可以不行了,这是什么鬼问题
1 回答
已采纳
ruibin
TA贡献358条经验 获得超213个赞
getbox.onmouseout = autoplay()是什么意思呢?你是想要在鼠标移出的时候调用autoplay函数吧。但是,你这样调用的意思是,初始化就调用autoplay函数。如果想要达成你想要的效果,getbox.onmouseout = autoplay这样就行了。
添加回答
举报
0/150
提交
取消