当鼠标点击按钮时,向转滚动图片,但是当鼠标点击快的时候,上一个滚动没结束,下一个滚动又开始,最终造成位置错误,怎么解决呢,我用的是animate();
<!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:10000px;
height:300px;
position:relative;
}
img {
border:0
}
;
#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;
}
*/#myimg {
width:1700px;
height:300px;
}
#img2 {
margin:0 2px;
width:300px;
height:300px;
float:left;
}
</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:1000},{url:'images/1.jpg',link:'http://www.jb51.net/#',time:2000},{url:'images/3.jpg',link:'http://www.jb51.net',time:3000},{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 image2=$("#myimg2");
var autoPlay;
var myLeft;
var myLeft2;
var time2;
//添加图片与数字
for(i=0;i<picArray.length;i++)
{
image.append('<div id="img2"><a href="'+picArray[i].link+'"><img id="pic'+ i + '" src="'+picArray[i].url+'"></a></div>');
image2.append('<div id="img2"><a href="'+picArray[i].link+'"><img id="pic'+ i + '" src="'+picArray[i].url+'"></a></div>');
// $("#sztab").append('<span id="sz'+i+'">'+(i+1)+'</span');
//$("#sz"+i).data("index",i);

}

function dp(){
clearInterval(autoPlay);
var myLeft;
var myLeft2;
  autoPlay=setInterval(function(){
 myLeft=parseInt($("#myimg").css("marginLeft"),10);
myLeft2=parseInt($("#myimg2").css("marginLeft"),10);
if(-myLeft>=5*300)
{
$("#myimg").css({marginLeft:'1220px'});
}
else
{
$("#myimg").animate({marginLeft:myLeft-305+'px'});

}

if(-myLeft2>=5*300)
{
$("#myimg2").css({marginLeft:'1220px'});
}
else
{
$("#myimg2").animate({marginLeft:myLeft2-305+'px'});
}
},3000); }
//点击按钮时
$("#c1").click(function(){
clearInterval(autoPlay);
myLeft=parseInt($("#myimg").css("marginLeft"),10);
myLeft2=parseInt($("#myimg2").css("marginLeft"),10);

if(-myLeft>=5*300)
{
$("#myimg").css({marginLeft:'1220px'});
}
else
{
$("#myimg").animate({marginLeft:myLeft-305+'px'});

}
if(-myLeft2>=5*300)
{
$("#myimg2").css({marginLeft:'1220px'});
}
else
{
$("#myimg2").animate({marginLeft:myLeft2-305+'px'});
}

dp();
});


dp();


});</script>
<div class="box" id="box"> <img src="images/LR_btn.gif" id="c1"/> <img src="images/LR_btn_1.gif" id="c2"/>
<div style="width:300px;height:300px;overflow:hidden;position:relative;">
<div id="myimg" style="position:absolute;left:0;top:0;margin-left:0;"> </div>
<div id="myimg2" style="width:1700px;height:300px;position:absolute;left:0;top:0;margin-left:1525px;"></div>
<div id="sztab"></div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    具体到代码,不太清楚怎么写,但是有个思路,就是两次点击,执行更换图片,中间最好加个时间间隔。就是点击第一次了,立即点击不起作用,要等到300毫秒后的点击才能起作用。
    http://topic.csdn.net/u/20110815/10/6d185a21-d82d-47cd-a26f-f2ecd9bea83d.html希望对你有所帮助
      

  2.   

    给LZ几个jq的函数
    1.若不希望元素在执行动画时响应另一个动画, 可以利用$("div:not(:animated)")来进行筛选;
    2.若希望元素立即执行完动画, 可以使用$.stop()方法(可以配置clearQueue, gotoEnd - version1.4+)
      

  3.   

    if (!$("#DIV1").is(":animated"))//判断当前动画是否正在处于动画、用他判断一个动画 是否处于动画之中,如果不在再执行你的下一个动画
      

  4.   

    加一个同步锁吧。。<!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:10000px;
        height:300px;
        position:relative;
    }
    img {
        border:0
    }
    ;
    #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;
    }
    */#myimg {
        width:1700px;
        height:300px;
    }
    #img2 {
        margin:0 2px;
        width:300px;
        height:300px;
        float:left;
    }
    </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:1000},{url:'images/1.jpg',link:'http://www.jb51.net/#',time:2000},{url:'images/3.jpg',link:'http://www.jb51.net',time:3000},{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 image2=$("#myimg2");
        var autoPlay;
        var myLeft;
        var myLeft2;
        var time2;
        
        var lockHandel = function(){    
         var lock = true;
         return {
                    //判断是否已锁
         isLock : function(){
         return lock;
         },
                    //解锁
         unLock : function(){
         lock = false;
         },
                    //上锁
         lock : function(){
         lock = true;
         }
         }
        }()
        //添加图片与数字
        for(i=0;i<picArray.length;i++)
        {
            image.append('<div id="img2"><a href="'+picArray[i].link+'"><img id="pic'+ i + '" src="'+picArray[i].url+'"></a></div>');
            image2.append('<div id="img2"><a href="'+picArray[i].link+'"><img id="pic'+ i + '" src="'+picArray[i].url+'"></a></div>');
    //        $("#sztab").append('<span id="sz'+i+'">'+(i+1)+'</span');
            //$("#sz"+i).data("index",i);
            
        }
        
        function dp(){
            clearInterval(autoPlay);
            var myLeft;
            var myLeft2;
             autoPlay=setInterval(function(){
             myLeft=parseInt($("#myimg").css("marginLeft"),10);
            myLeft2=parseInt($("#myimg2").css("marginLeft"),10);
                if(-myLeft>=5*300)
                {
                    $("#myimg").css({marginLeft:'1220px'});
                }
                else
                {
                $("#myimg").animate({marginLeft:myLeft-305+'px'});
                
                }
                
                if(-myLeft2>=5*300)
                {
                    $("#myimg2").css({marginLeft:'1220px'});
                }
                else
                {
                    $("#myimg2").animate({marginLeft:myLeft2-305+'px'});
                }
            },3000);    }
        //点击按钮时
    $("#c1").click(function(){
               if (lockHandel.isLock()){
        lockHandel.lock();
                clearInterval(autoPlay);
                myLeft=parseInt($("#myimg").css("marginLeft"),10);
             myLeft2=parseInt($("#myimg2").css("marginLeft"),10);
            
                if(-myLeft>=5*300)
            {
                $("#myimg").css({marginLeft:'1220px'});
            }
            else
            {
            $("#myimg").animate({marginLeft:myLeft-305+'px'}, function(){lockHandel.unLock()}); //动画执行完毕后解锁
            
            }
            if(-myLeft2>=5*300)
            {
                $("#myimg2").css({marginLeft:'1220px'});
            }
            else
            {
                $("#myimg2").animate({marginLeft:myLeft2-305+'px'}, function(){lockHandel.unLock()}); //动画执行完毕后解锁
            }        
            dp();
    }
            });
            
            
        dp();        
                
                
    });</script>
    <div class="box" id="box"> <img src="images/LR_btn.gif" id="c1"/> <img src="images/LR_btn_1.gif" id="c2"/>
        <div style="width:300px;height:300px;overflow:hidden;position:relative;">
            <div id="myimg" style="position:absolute;left:0;top:0;margin-left:0;"> </div>
            <div id="myimg2" style="width:1700px;height:300px;position:absolute;left:0;top:0;margin-left:1525px;"></div>
            <div id="sztab"></div>
        </div>
    </div>
    </body>
    </html>