jquery图片轮播出现的问题！
自动轮播效果运行一段时间后，第一次点“prev”没有效果，再点一次就正常了，不知道为什么秋解答？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片轮播</title>
<style type="text/css">
*{margin:0;padding:0;}
#all { background-color: #F6F6F6; }
.scroll_show { width: 500px; margin-right: auto; margin-left: auto; }
.scroll_show .hd { }
.scroll_show .hd ul { width: 150px; background-color: #CCC; margin-right: auto; margin-left: auto; }
.scroll_show .hd ul li { width: 50px; float: left; line-height: 30px; background-color: #CCC; height: 30px; text-align: center; list-style-type: none; }
.scroll_show .hd ul .hover { background-color: #F00; }
.scroll_show .bd { width: 500px; overflow: hidden; }
.scroll_show .bd ul { width: 1500px; }
.scroll_show .bd ul li { float: left; width: 500px; font-size: 20px; line-height: 300px; font-weight: bold; color: #FFF; text-align: center; list-style-type: none; }
.button { width: 100px; margin-right: auto; margin-left: auto; overflow: hidden; }
.button #prev { width: 50px; background-color: #CCC; height: 50px; float: left; text-align: center; line-height: 50px; }
.button #next { width: 50px; background-color: #CCC; height: 50px; text-align: center; float: left; line-height: 50px; }
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="all">
<div class="scroll_show">
<div class="hd">
<ul>
<li class="hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="bd">
<ul>
<li style="background-color:#F00; height: 300px;">1</li>
<li style="background-color:#0F0; height: 300px;">2</li>
<li style="background-color:#00F; height: 300px;">3</li>
</ul>
</div>
</div>
<div class="button">
<div id="prev">prev</div>
<div id="next">next</div>
</div>
</div>
<script>
$(document).ready(function(){
var banner=$('.bd ul');
var len=3;
var prev=$('#prev');
var next=$("#next");
var index=0;
prev.click(function(){
index -= 1;
index==-1?index=len-1:index=index;
showpic(index);
});
next.click(function() {
index += 1;
index==len?index=0:index=index;
showpic(index);
});
$('.hd ul li').click(function(){
var num=$(this).index();
$('.hd ul li').stop(true,false).removeClass("hover");
$('.hd ul li').eq(num).addClass("hover");
showpic(num);
}).trigger("mouseover");
if(true){
$('#all').hover(function(){
clearInterval(bannershow);
},function(){
bannershow=setInterval(function(){
showpic(index);
index++;
index==len?index=0:index=index;
},2000);
}).trigger("mouseleave");
}
function showpic(index){
var nowleft=-index*500;
banner.stop(true,false).animate({"margin-left":nowleft},300);
$('.hd ul li').removeClass("hover").eq(index).addClass("hover");
}
});
</script>
</body>
展开
收起
1
条回答
写回答
写回答
-
当前index为2是
bannershow=setInterval(function(){ showpic(index); index++; index==len?index=0:index=index; },2000); interval回调执行后，index被设置为0； 而当 prev.click(function(){ index -= 1; index==-1?index=len-1:index=index; showpic(index); });回调执行时，index有被设置会2，showpic(2);
看到的效果是点了prev画面冻结了,过会就好了~~~解决方法为:
bannershow=setInterval(function(){ index++; index==len?index=0:index=index; showpic(index);2019-07-17 19:19:09赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
