开发者社区> 问答> 正文

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> 

展开
收起
小旋风柴进 2016-05-30 10:10:26 2188 0
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
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
23-Vue.js在前端...1506518547.pdf 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载

相关实验场景

更多