做js图片定时切换时，自动切换时（2s）正常，但是为什么点击几次向左按钮后，自动切换速度越来越快？？？
怎么解决啊，新手？？？下面是代码：<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><...
怎么解决啊，新手？？？下面是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script language="javascript">
var pics=new Array();
var num=0;
var boxs;
for(var i=0;i<5;i++)//给数组赋值
{
pics[i]="images/0"+(i+1)+".jpg";
}
window.onload=Showpic;
function Showpic()//是图片自动2s切换
{
document.getElementById("mypic").src=pics[num];
num++;
if(num>4)
{
num=0;
}
boxs=setTimeout("Showpic()",2000);
}
function ShowLtbtn()//向左按钮
{
clearTimeout(boxs);
num--;
if(num<0)
{
num=4;
}
document.getElementById("mypic").src=pics[num];
box1=setTimeout("Showpic()",3000);
}
function ShowRtbtn()//向右按钮
{
clearTimeout(boxs);
document.getElementById("mypic").src=pics[num];
box2=setTimeout("Showpic()",2000);
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
width: 800px;
height: 280px;
position: relative;
}
.Ltbtn{
background: #000000 url(images/spirte.png) no-repeat;
height: 100px;
width: 45px;
position: absolute;
top: 90px;
left: 0px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor:pointer;
}
.Rtbtn{
background: #000000 url(images/spirte.png) no-repeat right top;
height: 100px;
width: 45px;
position: absolute;
top: 90px;
right: 0px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
<div>
<img id="mypic" src="images/01.jpg" width="800" height="280" alt=""/>
</div>
<div class="Ltbtn" onClick="ShowLtbtn()">
</div>
<div class="Rtbtn" onClick="ShowRtbtn()">
</div>
</div>
</body>
</html> 展开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script language="javascript">
var pics=new Array();
var num=0;
var boxs;
for(var i=0;i<5;i++)//给数组赋值
{
pics[i]="images/0"+(i+1)+".jpg";
}
window.onload=Showpic;
function Showpic()//是图片自动2s切换
{
document.getElementById("mypic").src=pics[num];
num++;
if(num>4)
{
num=0;
}
boxs=setTimeout("Showpic()",2000);
}
function ShowLtbtn()//向左按钮
{
clearTimeout(boxs);
num--;
if(num<0)
{
num=4;
}
document.getElementById("mypic").src=pics[num];
box1=setTimeout("Showpic()",3000);
}
function ShowRtbtn()//向右按钮
{
clearTimeout(boxs);
document.getElementById("mypic").src=pics[num];
box2=setTimeout("Showpic()",2000);
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
width: 800px;
height: 280px;
position: relative;
}
.Ltbtn{
background: #000000 url(images/spirte.png) no-repeat;
height: 100px;
width: 45px;
position: absolute;
top: 90px;
left: 0px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor:pointer;
}
.Rtbtn{
background: #000000 url(images/spirte.png) no-repeat right top;
height: 100px;
width: 45px;
position: absolute;
top: 90px;
right: 0px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
<div>
<img id="mypic" src="images/01.jpg" width="800" height="280" alt=""/>
</div>
<div class="Ltbtn" onClick="ShowLtbtn()">
</div>
<div class="Rtbtn" onClick="ShowRtbtn()">
</div>
</div>
</body>
</html> 展开
展开全部
一个函数内部如果用setTimeout调用自身，那么在外部调用这个函数时，就不要再用setTimeout了，否则会产生嵌套效应，越来越快。
所以 box1=setTimeout("Showpic()",3000); 改为 Showpic(); 即可
同理，box2=setTimeout("Showpic()",2000); 也要改为 Showpic();
所以 box1=setTimeout("Showpic()",3000); 改为 Showpic(); 即可
同理，box2=setTimeout("Showpic()",2000); 也要改为 Showpic();
更多追问追答
追问
向右按钮可以实现了，但是向左按钮哪里我要实现的功能是：点击按钮后翻向上一张图片，如果一段时间不按了，则恢复为自动（2s）跳转下一张图片。可是如果将box1直接改为调用函数的话，那点击事件在点击一下后怎么就失效了
追答
向左的话，num不能-1，应该是-2，因为Showpic()中num已经+1了，如果-1的话，就相当于恢复为当前图片，所以是看不到效果的，应该-2
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
