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>