求助，jquery图片轮播问题，hover正常，设置成click会出现问题，求解？

Question

求助，jquery图片轮播问题，hover正常，设置成click会出现问题，求解？

发布于
2016-01-12

$('.hd ul li').click(function(){
        var num=$(this).index();
        index=num;
        clearInterval(autochange);
        $('.hd ul li').stop(true,false).removeClass("hover");
        $('.hd ul li').eq(index).addClass("hover");
        changeto(index);
    });

代码如下：
jquery图片轮播问题，hover正常，设置成click会出现问题，求解？

<!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> 
<script>
$(document).ready(function(){
    var index=0;
    var len=$('.bd ul li').length;

    //改变
    function changeto(index){
        var num=index*500;
        $('.bd ul').animate({"margin-left":-num},300);
        $('.hd ul li').removeClass("hover").eq(index).addClass("hover");

    }

    //定时器
    var autochange=setInterval(function(){
        index<(len-1)?index++:index=0;
        changeto(index);
    },1000);

    //重新改变
    function autochangeagain(){
        autochange=setInterval(function(){
            index<(len-1)?index=index+1:index=0
            changeto(index);
        },1000);
    }
    


    $('#prev').hover(function(){
        clearInterval(autochange);
    },function(){
        autochangeagain();
    });

    $('#prev').click(function(){
        index=(index>0)?index=index-1:len-1;
        changeto(index);
    });




    $('#next').hover(function(){
        clearInterval(autochange);
    },function(){
        autochangeagain();
    });

    $('#next').click(function(){
        index<(len-1)?index=index+1:index=0;
        changeto(index);
    });
    

    $('.hd ul li').hover(function(){
        var num=$(this).index();
        index=num;
        clearInterval(autochange);
        $('.hd ul li').stop(true,false).removeClass("hover");
        $('.hd ul li').eq(index).addClass("hover");
        changeto(index);
    });

});
</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>
</body> 
</html>

jquery

阅读 2.3k

1 个回答

✓ 已被采纳

有什么问题？我试了没问题
 http://jsbin.com/vunujanaqa/edit?html,js,output

撰写回答