欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery学习之天猫轮播图及解决bug问题实例分享

程序员文章站 2024-01-02 15:43:58
实现效果是:图片轮播,点击时下面对li显示对应图片,接着轮播 为了让两个操作分隔开, 第一种方法:当点击时clearinterval,在执行完操作时再setinterval $("#m...

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

为了让两个操作分隔开,

第一种方法:当点击时clearinterval,在执行完操作时再setinterval

$("#mbb ul li").click(function(){  
      <span style="color:#ff0000;"> 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)});</span>  
       $(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>  
<p id="mbb">  
  <p 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">  
   </p>  
   <ul>  
    <li style="opacity:0.7">衣服1</li>  
    <li>裙子2</li>  
    <li>套装3</li>  
    <li>时尚4</li>  
     <li>可爱爱5</li>  
  </ul>  
</p>  
  
  
  
  
  
  
</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>  
  
   
  
  
<p id="mbb">  
  <p 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">  
   </p>  
   <ul>  
    <li style="opacity:0.7">衣服1</li>  
    <li>裙子2</li>  
    <li>套装3</li>  
    <li>时尚4</li>  
     <li>可爱爱5</li>  
  </ul>  
   
  
</p>  
  
</body>  
</html>  

上一篇:

下一篇: