直接上代码吧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript实战手册练习</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#image_box{ width:490px; height:170px; border:1px black solid; position:relative; cursor:pointer;}
#image_box div{ width:490px; height:170px; position:absolute; top:0; left:0;
/*注意这里定义过渡动画*/
opacity:0; transition:opacity 0.5s linear;
}
#btn { position:absolute; right:0; bottom:5px; text-align:center;}
#btn li{ width:18px; height:18px; border-radius:90px; background-color:red; float:left; font-size:12px; line-height:18px; margin-left:5px; margin-right:5px; cursor:pointer;}
#btn .diff{ color:#FFF; background-color:#000;}
</style>
</head>
<body>
<div id="image_box">
<div style="background-color:#F0F; opacity:1;">01广告</div>
<div style="background-color:#C90">02广告</div>
<div style="background-color:#39C">03广告</div>
<div style="background-color:#99F">04广告</div>
<div style="background-color:#999">05广告</div>
<ul id="btn">
<li class="diff">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var image_box=document.getElementById("image_box");
var btn=image_box.getElementsByTagName("li");
var image_box_div=image_box.getElementsByTagName("div");
var i=0;
var index=0;
function show(a){
for(i=0;i<btn.length;i++){
btn[i].className="";
btn[a].className="diff";
}
for(i=0;i<image_box_div.length;i++){
image_box_div[i].style.opacity=0;
image_box_div[a].style.opacity=1;
}
}
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
show(this.index);
}
}
function lunbo(){
var play=setInterval(function(){
index++;
if(index>=image_box_div.length) index=0;
show(index);
},2000)
}
lunbo();
image_box.onmouseover=function(){
clearInterval(play);
}
image_box.onmouseout=function(){
lunbo();
}
</script>
</body>
</html>
3 回答
宝慕林4294392
TA贡献2021条经验 获得超8个赞
看了楼主的代码，发现几个问题：
1、楼主应该是js新手，因为楼主竟然不知道方法里面所定义的局部变量（比如楼主用来记录定时器的play)，在方法外面是无法引用到的。
2、从show方法做太多无用功来看，更加印证了我对楼主是新手的猜想。
3、如果说这些代码全都是楼主自己写的，且作为一个新手能写出这样的代码，不说有多么厉害，至少可证明楼主是有些程序天赋的，思维总的来说还算严谨，没有太多的遗漏，美中不足是没有考虑鼠标移出后重启定时器以后切换图片的连续性，比如说先是自动切换到第2张，此时鼠标移动到了第4张，当鼠标移出以后我认为应该自动切换到第5张，而不是第3张。
好了，说了这么多，还是上我修改过后的代码，本着尽量少改的原则，我加了两行代码，改了一行代码，具体加和改的位置都是有注释的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript实战手册练习</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#image_box{ width:490px; height:170px; border:1px black solid; position:relative; cursor:pointer;}
#image_box div{ width:490px; height:170px; position:absolute; top:0; left:0;
/*注意这里定义过渡动画*/
opacity:0; transition:opacity 0.5s linear;
}
#btn { position:absolute; right:0; bottom:5px; text-align:center;}
#btn li{ width:18px; height:18px; border-radius:90px; background-color:red; float:left; font-size:12px; line-height:18px; margin-left:5px; margin-right:5px; cursor:pointer;}
#btn .diff{ color:#FFF; background-color:#000;}
</style>
</head>
<body>
<div id="image_box">
<div style="background-color:#F0F; opacity:1;">01广告</div>
<div style="background-color:#C90">02广告</div>
<div style="background-color:#39C">03广告</div>
<div style="background-color:#99F">04广告</div>
<div style="background-color:#999">05广告</div>
<ul id="btn">
<li class="diff">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var image_box=document.getElementById("image_box");
var btn=image_box.getElementsByTagName("li");
var image_box_div=image_box.getElementsByTagName("div");
var i = 0;
var index = 0;
//这一行代码是我加的
var play = 0;
//这个方法里面的代码做了很多无用功，请楼主自己改进
function show(a){
for(i=0;i<btn.length;i++){
btn[i].className="";
btn[a].className="diff";
}
for(i=0;i<image_box_div.length;i++){
image_box_div[i].style.opacity=0;
image_box_div[a].style.opacity=1;
}
}
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
//这一行代码是我加的,没有这一行代码的话，重新启动定时器后第一次切换图片会出现跳跃
index = this.index;
show(this.index);
}
}
function lunbo(){
//这一行代码是我改的，去掉了var
play=setInterval(function(){
index++;
if(index>=image_box_div.length) index=0;
show(index);
},2000)
}
lunbo();
image_box.onmouseover=function(){
clearInterval(play);
}
image_box.onmouseout=function(){
lunbo();
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消