小白的jquery学习之路04效果天猫轮播图及解决bug问题_店铺首页大图轮播显示参数错误-CSDN博客

本文链接：https://blog.csdn.net/weixin_37770640/article/details/80616329

实现效果是：图片轮播，点击时下面对li显示对应图片，接着轮播

为了让两个操作分隔开，

第一种方法：当点击时clearInterval,在执行完操作时再setInterval

 $("#mbb ul li").click(function(){
        window.clearInterval(timer);
        c=$(this).index();
        var left=c*(-952);
        $("#mbb .con").stop().animate({'left':left+'px'},300,function(){
        timer=window.setInterval(function(){run();},2000)});
        $(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'})
      })

<html>
<head>
	<style type="text/css">
  *{
    margin: 0px auto;
    list-style-type: none;
  }


  #mbb ul{
    position: absolute;bottom: 0px;right: 0px;
  }

  #mbb ul li{
    width: 116px;height:29px;float: left;line-height: 29px;text-align: center;opacity: 0.4;color: white;background-color: black;font-size: 12px;margin-left: 1px;
  }
   #mbb ul li:hover{
    color: #C00;
    
  }

  img{
  width: 952px;height: 440px;float: left;
  }

#mbb{
  width: 952px;height: 440px;border: 4px green solid;margin:0px auto; position: relative;top: 0px;left:0px;overflow: hidden;       
}
#mbb .con{
  width: 5712px;height: 440px;position: absolute;left: 0px;top:0px;
}
	</style>
  


    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
      var c=0;
      var timer=window.setInterval(function(){run();
      },2000)
     
      $("#mbb ul li").click(function(){
        window.clearInterval(timer);
        c=$(this).index();
        var left=c*(-952);
        $("#mbb .con").stop().animate({'left':left+'px'},300,function(){
        timer=window.setInterval(function(){run();},2000)});
        $(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'})
      })   
      function run(){
        c++;
        if(c==5){
            $("#mbb ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'}) 
        }

        if(c==6){
              $("#mbb .con").css({'left':'0px'});
              c=1;
        }
        var l=-952*c;

       $("#mbb .con").stop().animate({'left':l+'px'},300);
       $("#mbb ul li").eq(c).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'}) 
      }
      
   })
      
  
</script>


</head>
<body>
<div id="mbb">
  <div class="con">
	     <img src="p1.jpg">
	     <img src="p2.jpg"> 
       <img src="p3.jpg">
       <img src="p4.jpg">
       <img src="p5.jpg">
       <img src="p1.jpg">
   </div>
   <ul>
    <li style="opacity:0.7">衣服1</li>
    <li>裙子2</li>
    <li>套装3</li>
    <li>时尚4</li>
     <li>可爱爱5</li>
  </ul>
</div>






</body>
</html>

第二种方法用setTimeout实现，在300秒之后执行run操作

        clearTimeout(t)
        t=setTimeout(function(){
          timer=window.setInterval(function(){run(); },2000)
        },300)

        c=$(this).index();
        var left=c*(-952);
        $("#mbb .con").stop().animate({'left':left+'px'},300);
        $(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'})

同时，为防止不小心点击造成混乱，设置一个flag，再执行完animate操作后flag=2

<html>
<head>
	<style type="text/css">
  *{
    margin: 0px auto;
    list-style-type: none;
  }


  #mbb ul{
    position: absolute;bottom: 0px;right: 0px;
  }

  #mbb ul li{
    width: 116px;height:29px;float: left;line-height: 29px;text-align: center;opacity: 0.4;color: white;background-color: black;font-size: 12px;margin-left: 1px;
  }
   #mbb ul li:hover{
    color: #C00;
    
  }

  img{
  width: 952px;height: 440px;float: left;
  }

#mbb{
  width: 952px;height: 440px;border: 4px green solid;margin:0px auto; position: relative;top: 0px;left:0px;overflow: hidden;       
}
#mbb .con{
  width: 5712px;height: 440px;position: absolute;left: 0px;top:0px;
}
</style>
 
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
      var c=0;
      var flag=0;//0代表能点击，1代表不能点击
      var t;
      var timer=window.setInterval(function(){run();
      },2000)
     
      $("#mbb ul li").click(function(){
        if(flag==1){
          return;
        }
        window.clearInterval(timer);
        //为保证多次点击造成timeout混乱
        clearTimeout(t)
        t=setTimeout(function(){
          timer=window.setInterval(function(){run(); },2000)
        },300)

        c=$(this).index();
        var left=c*(-952);
        $("#mbb .con").stop().animate({'left':left+'px'},300);
        $(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'})
      })

       
      function run(){
        c++;
        if(c==5){
            $("#mbb ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'}) 
        }

        if(c==6){
              $("#mbb .con").css({'left':'0px'});
              c=1;
        }
        var l=-952*c;

       $("#mbb .con").stop().animate({'left':l+'px'},300,function(){
        flag=2;
       });
       $("#mbb ul li").eq(c).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'}) 
      }
      
   })
      
   


       
  
</script>


</head>
<body>

 


<div id="mbb">
  <div class="con">
       <img src="p1.jpg">
       <img src="p2.jpg"> 
       <img src="p3.jpg">
       <img src="p4.jpg">
       <img src="p5.jpg">
       <img src="p1.jpg">
   </div>
   <ul>
    <li style="opacity:0.7">衣服1</li>
    <li>裙子2</li>
    <li>套装3</li>
    <li>时尚4</li>
     <li>可爱爱5</li>
  </ul>
 

</div>

</body>
</html>