当鼠标点击按钮时,向转滚动图片,但是当鼠标点击快的时候,上一个滚动没结束,下一个滚动又开始,最终造成位置错误,怎么解决呢,我用的是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>
<!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>
http://topic.csdn.net/u/20110815/10/6d185a21-d82d-47cd-a26f-f2ecd9bea83d.html希望对你有所帮助
1.若不希望元素在执行动画时响应另一个动画, 可以利用$("div:not(:animated)")来进行筛选;
2.若希望元素立即执行完动画, 可以使用$.stop()方法(可以配置clearQueue, gotoEnd - version1.4+)
<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>