高手们看下怎么停掉settimeout

图片轮播，当我不点击数字的时候一切正常，可以实现轮播，但当我点击数字的时候，又再次调用了函数，测试了下，论播的settimeout并没有结束，这时两个事件同步进行了，出现轮播效果错误，高手们看下，怎么做才能让点击数字的时候，自动轮播的事件结束，或者有什么方法让两个事件不冲突？<!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>
.box {
width:300px;
height:300px;
position:relative;
}
#sztab {
position:absolute;
width:100px;
bottom:0;
right:20px;
color:#fff;
z-index:10;
}
#sztab span {
display:inline-block;
width:15px;
height:20px;
background:#000;
margin:0 2px;
text-align:center;
cursor:pointer;
}
#myimg img {
width:300px;
height:300px;
border:0;
position:absolute;
left:0;
top:0;
}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
</head><body>
<script language="javascript">
var picArray=[{url:'images/2.jpg',link:'http://www.jb51.net/#',time:5000},{url:'images/1.jpg',link:'http://www.jb51.net/#',time:4000},{url:'images/3.jpg',link:'http://www.jb51.net',time:6000},{url:'images/4.jpg',link:'http://www.jb51.net',time:6000},{url:'images/5.jpg',link:'http://www.jb51.net',time:6000}];
$(function(){
var selectedBtn;
var selectedItem;
var image=$("#myimg")
//添加图片与数字
for(i=0;i<picArray.length;i++)
{
image.append('<a href="'+picArray[i].link+'"><img id="pic'+ i + '" style="z-index:'+(picArray.length-i)+ '" src="'+picArray[i].url+'"></a>');
$("#sztab").append('<span id="sz'+i+'">'+(i+1)+'</span');
$("#sz"+i).data("index",i);

}
//当点击数字的时候
$("#sztab span").click(
function(){
var clickId=$(this).attr("id").split("sz")[1];
showimage(clickId);
});//循环播放
showimage(0);
function showimage(index){

clearTimeout(autoPlay);
$("#myimg img").fadeOut(100);
$("#pic"+index).fadeIn("slow");
index++;
alert(index)
if(index > picArray.length-1)index=0;
var autoPlay = setTimeout(
function(){

showimage(index);
},5000);
}

});
</script>
<div class="box" id="box">
<div id="myimg"> </div>
<div id="sztab"></div>
</div>
</body>
</html>

解决方案 »

  1.   

    <script language="javascript">
    var picArray=[{url:'images/2.jpg',link:'http://www.jb51.net/#',time:5000},{url:'images/1.jpg',link:'http://www.jb51.net/#',time:4000},{url:'images/3.jpg',link:'http://www.jb51.net',time:6000},{url:'images/4.jpg',link:'http://www.jb51.net',time:6000},{url:'images/5.jpg',link:'http://www.jb51.net',time:6000}];
    $(function(){
        var selectedBtn;
        var selectedItem;
    var autoPlay;
        var image=$("#myimg")
        //添加图片与数字
        for(i=0;i<picArray.length;i++)
        {
            image.append('<a href="'+picArray[i].link+'"><img id="pic'+ i + '" style="z-index:'+(picArray.length-i)+ '" src="'+picArray[i].url+'"></a>');
            $("#sztab").append('<span id="sz'+i+'">'+(i+1)+'</span');
            $("#sz"+i).data("index",i);
            
        }
        //当点击数字的时候
            $("#sztab span").click(
            function(){
                var clickId=$(this).attr("id").split("sz")[1];
                showimage(clickId);
            });//循环播放
        showimage(0);
        function showimage(index){
            
            clearTimeout(autoPlay);
            $("#myimg img").fadeOut(100);
            $("#pic"+index).fadeIn("slow");
            index++;
            alert(index)
            if(index > picArray.length-1)index=0;
            autoPlay = setTimeout(
            function(){
                        
            showimage(index);
                },5000);    
            }
            
            });
    </script>
      

  2.   

    用了cleartimeout，不点击是正常的，点击就不正常了
      

  3.   


    每一个把简单问题复杂化的孩子都伤不起啊~~~！把变量定义放到外面来。如我下面所示
    var picArray=[{url:'images/2.jpg',link:'http://www.jb51.net/#',time:5000},{url:'images/1.jpg',link:'http://www.jb51.net/#',time:4000},{url:'images/3.jpg',link:'http://www.jb51.net',time:6000},{url:'images/4.jpg',link:'http://www.jb51.net',time:6000},{url:'images/5.jpg',link:'http://www.jb51.net',time:6000}];
    $(function(){
        var selectedBtn;
        var selectedItem;
        var image=$("#myimg")
        var autoPlay;
        //添加图片与数字
        for(i=0;i<picArray.length;i++)
        {
            image.append('<a href="'+picArray[i].link+'"><img id="pic'+ i + '" style="z-index:'+(picArray.length-i)+ '" src="'+picArray[i].url+'"></a>');
            $("#sztab").append('<span id="sz'+i+'">'+(i+1)+'</span');
            $("#sz"+i).data("index",i);
            
        }
        //当点击数字的时候
            $("#sztab span").click(
            function(){
                var clickId=$(this).attr("id").split("sz")[1];
                showimage(clickId);
            });//循环播放
        showimage(0);
        function showimage(index){
            
            clearTimeout(autoPlay);
            $("#myimg img").fadeOut(100);
            $("#pic"+index).fadeIn("slow");
            index++;
            alert(index)
            if(index > picArray.length-1)index=0;
            autoPlay= setTimeout(
            function(){
                        
            showimage(index);
                },1000);    
            }
            
            });
      

  4.   

    你要把autoPlay这个setTimeout对象设为全局变量，放在方法体外面试试。