为什么我的代码中，一旦点击下一张 按钮过于频繁（且快）的话，图片切换就会出乱？
来源：5-1 按钮切换
二五七
2015-08-31 16:52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.{margin:0px;padding:0px;text-decoration:none;}
body{padding:20px;}
#container{width:967px;height:330px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #333;}
#pic{width:7736px;height:330px;position:absolute;z-index:1;}
#pic img{float:left;}
#buttons{width;100px;height:10px;position:absolute;bottom:20px;left:433px;z-index:2;}
#buttons span{cursor:pointer;float:left;border:1px solid #fff;width:10px;height:10px;border-radius:5px;margin:0 4px;}
#buttons .on {background: orangered;}
.arrow{cursor:pointer;line-height:60px;text-align:center;display:none;font-size:36px;font-weight:bold;width:30px;height:60px;background-color:RGBA(0,0,0,0.3);color:#fff;z-index:2;position:absolute;top:135px;text-decoration:none;}
.arrow:hover{background-color:RGBA(0,0,0,0.7);}
#container:hover .arrow{display:block;}
#prev{left:0px;}
#next{right:0px;}
</style>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var pic = document.getElementById('pic');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var len = 6;
var animated = false;
var timer;
function showbutton() {
for (var i = 0; i < buttons.length ; i++) {
if( buttons[i].className == 'on'){
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
function animate(offset){
if(offset == 0)
{
return;
}
animated = true;
var time = 500;
var interval = 10;
var speed = offset/(time/interval);
var newleft = parseInt(pic.style.left)+offset;
function go()
{
if((speed > 0 && parseInt(pic.style.left) < newleft) || (speed < 0 && parseInt(pic.style.left) > newleft))
{
pic.style.left = parseInt(pic.style.left) + speed + 'px';
setTimeout(go,interval);
}
else
{
pic.style.left = newleft +'px';
if(newleft > -100)
{
pic.style.left = -5802 + 'px';
}
if(newleft <-967*len)
{
pic.style.left = -967 + 'px';
}
animated = false;
}
}
go();
}
function play()
{
timer = setInterval(function(){next.onclick();play();},interval);
}
function stop()
{
clearInterval(timer);
}
next.onclick = function(){
if(index == 6)
{
index = 1;
}
else
{
index+= 1;
}
animate(-967);
showbutton();
}
prev.onclick = function(){
if(index == 1)
{
index = 6;
}
else
{
index-= 1;
}
animate(967);
showbutton();
}
for(var i=0;i<buttons.length;i++)
{
buttons[i].onclick = function()
{
if(animated)
{
return;
}
if(this.className == 'on')
{
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -967*(myIndex - index);
animate(offset);
index = myIndex;
showbutton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="pic" style="left:-967px;">
<img src="image/a6.jpg" alt="6" />
<img src="image/a1.jpg" alt="1" />
<img src="image/a2.jpg" alt="2" />
<img src="image/a3.jpg" alt="3" />
<img src="image/a4.jpg" alt="4" />
<img src="image/a5.jpg" alt="5" />
<img src="image/a6.jpg" alt="6" />
<img src="image/a1.jpg" alt="1" />
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
<span index="6"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
写回答
关注
1回答
-
- luckymore
- 2015-08-31 19:03:58
不是乱，是点击过快而上一张图片动画未执行完，事件积累执行。而你又没做处理。。。所以看上去是乱得
焦点图轮播特效
通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程
65279 学习 · 611 问题
相似问题