jquery问题
//点击过或移上按钮后，鼠标再移到show_box时，运动不会停止..//但是如果不点击按钮，那么鼠标移到show_box时，运动会停止..//如果没有加按钮的hover...
//点击过或移上按钮后，鼠标再移到show_box时，运动不会停止..
//但是如果不点击按钮，那么鼠标移到show_box时，运动会停止..
//如果没有加按钮的hover事件，那么鼠标移到show_box，运动也会停止..
//连续点击时，有时候运动会很快
//以上时什么原因造成的？
<!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>
<style type="text/css">
*{ margin:0; padding:0;}
.show_box{ width:957px; height:661px; margin:0 auto; position:relative; overflow:hidden;}
.prev,.next{ width:46px; height:46px; display:block; position:absolute; top:308px; z-index:9999; cursor:pointer; background:#fff;}
.prev{ left:16px;;}
.next{ right:16px;}
.pic_box{ width:2871px; height:auto; position:absolute; left:0; top:0;}
.pic_box li{ width:957px; height:661px; float:left; list-style:none; text-align:center; line-height:661px; font-size:200px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="show_box">
<span class="prev"></span>
<span class="next"></span>
<ul class="pic_box">
<li style="background:blue">1</li>
<li style="background:yellow">2</li>
<li style="background:red">3</li>
<li style="background:green">4</li>
<li style="background:orange">5</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var iNow=0;
var num=0;
var timer=null
var btn=true;
$('.show_box').hover(function(){clearInterval(timer);document.title=num++},function(){timer=setInterval(auto,2000)})
$('.prev').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
$('.next').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
var picW=$('.pic_box li').eq(0).width();
$('.pic_box').width($('.pic_box li').length*picW);
$('.prev').click(function(){
if(btn){
btn=false;
iNow--;
if(iNow<0){
iNow=$('.pic_box li').length-1;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
})
$('.next').click(function(){
if(btn){
btn=false;
iNow++;
if(iNow>$('.pic_box li').length-1){
iNow=0;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
})
function auto(){
btn=false;
iNow++
if(iNow>$('.pic_box li').length-1){
iNow=0;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
timer=setInterval(auto,2000);
})
</script>
</body></html> 展开
//但是如果不点击按钮，那么鼠标移到show_box时，运动会停止..
//如果没有加按钮的hover事件，那么鼠标移到show_box，运动也会停止..
//连续点击时，有时候运动会很快
//以上时什么原因造成的？
<!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>
<style type="text/css">
*{ margin:0; padding:0;}
.show_box{ width:957px; height:661px; margin:0 auto; position:relative; overflow:hidden;}
.prev,.next{ width:46px; height:46px; display:block; position:absolute; top:308px; z-index:9999; cursor:pointer; background:#fff;}
.prev{ left:16px;;}
.next{ right:16px;}
.pic_box{ width:2871px; height:auto; position:absolute; left:0; top:0;}
.pic_box li{ width:957px; height:661px; float:left; list-style:none; text-align:center; line-height:661px; font-size:200px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="show_box">
<span class="prev"></span>
<span class="next"></span>
<ul class="pic_box">
<li style="background:blue">1</li>
<li style="background:yellow">2</li>
<li style="background:red">3</li>
<li style="background:green">4</li>
<li style="background:orange">5</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var iNow=0;
var num=0;
var timer=null
var btn=true;
$('.show_box').hover(function(){clearInterval(timer);document.title=num++},function(){timer=setInterval(auto,2000)})
$('.prev').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
$('.next').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
var picW=$('.pic_box li').eq(0).width();
$('.pic_box').width($('.pic_box li').length*picW);
$('.prev').click(function(){
if(btn){
btn=false;
iNow--;
if(iNow<0){
iNow=$('.pic_box li').length-1;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
})
$('.next').click(function(){
if(btn){
btn=false;
iNow++;
if(iNow>$('.pic_box li').length-1){
iNow=0;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
})
function auto(){
btn=false;
iNow++
if(iNow>$('.pic_box li').length-1){
iNow=0;
}
$('.pic_box').stop().animate({left:-iNow*picW},'slow',function(){btn=true;});
}
timer=setInterval(auto,2000);
})
</script>
</body></html> 展开
2个回答
展开全部
1、点击过或移上按钮后，鼠标再移到show_box时，运动不会停止
4、连续点击时，有时候运动会很快
因为你在 prev，next，show_box 上都绑定了鼠标离开就开始 setInterval，但 prev 和 next 是不需要的，show_box 绑定就够了。
2、但是如果不点击按钮，那么鼠标移到show_box时，运动会停止
3、如果没有加按钮的hover事件，那么鼠标移到show_box，运动也会停止
鼠标移到 show_box 运动停止这应该是对的，因为浏览者选择停止并开始阅读内容，这个不用改。
-----------------
所有问题都是 prev 和 next 的第二个函数 (hover out) 造成的，把这个 function 删掉就对了。
$('.prev').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
$('.next').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
这两句改为
$('.prev').hover(function(){clearInterval(timer)});
$('.next').hover(function(){clearInterval(timer)});
另外，你的代码不太工整，尤其是很多地方都没使用 ;（分号），这样很容易出现错误。
4、连续点击时，有时候运动会很快
因为你在 prev，next，show_box 上都绑定了鼠标离开就开始 setInterval，但 prev 和 next 是不需要的，show_box 绑定就够了。
2、但是如果不点击按钮，那么鼠标移到show_box时，运动会停止
3、如果没有加按钮的hover事件，那么鼠标移到show_box，运动也会停止
鼠标移到 show_box 运动停止这应该是对的，因为浏览者选择停止并开始阅读内容，这个不用改。
-----------------
所有问题都是 prev 和 next 的第二个函数 (hover out) 造成的，把这个 function 删掉就对了。
$('.prev').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
$('.next').hover(function(){clearInterval(timer)},function(){timer=setInterval(auto,2000)})
这两句改为
$('.prev').hover(function(){clearInterval(timer)});
$('.next').hover(function(){clearInterval(timer)});
另外，你的代码不太工整，尤其是很多地方都没使用 ;（分号），这样很容易出现错误。
追问
因为你在 prev，next，show_box 上都绑定了鼠标离开就开始 setInterval，但 prev 和 next 是不需要的，show_box 绑定就够了。
鼠标离开就开始setInterval，但是回到show_box上的时候，也会clearInterval啊，怎么就不能停止呢
追答
因为 show_box 的 hover 是在进入的时候被触发一次，当鼠标在其上面移动的时候不会一直被触发，hover out (第二个 function) 在离开的时候被触发一次。
所以你的鼠标从 prev，next 上离开回到 show_box 的时候并不会触发 hover，clearInterval 也就不会被执行，show_box 就会一直自动循环。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$('.pic_box').stop(true,true)//stop(true)，清空动画队列，立即停止所有动画dom
.animate({left:-iNow*picW},'slow',function(){btn=true;});//开始新dom动画
.animate({left:-iNow*picW},'slow',function(){btn=true;});//开始新dom动画
追问
还是不行，运动一样继续，停止不到
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
