首页 > 代码库 > JQ轮播图自动轮播效果及bug解决

JQ轮播图自动轮播效果及bug解决

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{margin:0;padding:0;}
  8             #box{width:600px;height:400px;margin:0 auto;position:relative;overflow:hidden;}
  9             #box .con{width:3600px;height:400px;position:absolute;left:0;top:0;}
 10             #box .con img{float:left;}
 11             #box ul{position:absolute;bottom:0;right:0;}
 12             #box ul li{list-style:none;float:left;margin-left:1px;width:80px;height:26px;line-height:26px;
 13                      color:#fff;text-align:center;background:red;opacity:0.7;}
 14                     
 15         </style>
 16         <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script>
 17        <script type="text/javascript">
 18               $(function(){
 19                   //大总管变量默认值为0,即第一项
 20                   var c=0;
 21                   //1代表不能点击,2代表能点击
 22                   var sta=2;
 23                   
 24                   
 25                   //无缝滚动定时器
 26                   function run(){
 27                       c++;
 28                       //当C=6,找到ul,把left重置为0,c为1
 29                   
 30                       if(c==6){ 
 31                           $("#box .con").css({left:0});
 32                           c=1;
 33                       }
 34                            var l=c*-600; //600为每张图片的宽度
 35                            sta=1;//定时器轮播时,不能点击
 36                          //con元素向左移动,运动前要加stop()
 37                          $("#box .con").animate({"left":l+"px"},400,function(){
 38                              //执行完动画,将sta转为可以点击
 39                              sta=2;
 40                          });
 41                          
 42                              if(c==5){
 43                           $(#box ul li).eq(0).css({opacity:0.9}).siblings().css({opacity:0.7});
 44                       }else{
 45                            //让当前的li透明度为0.9,兄弟li为0.7
 46                          $("#box ul li").eq(c).css({opacity:0.9}).siblings().css({opacity:0.7});
 47                       }
 48                          
 49                   }
 50                   
 51                    //全局变量timer
 52                    var timer=setInterval(run,1000);
 53                    var t;
 54                    
 55                    
 56                     //给li添加单击切换效果
 57                     $(#box ul li).click(function(){
 58                         if(sta==1){//不能点击
 59                             return; //后面代码不执行,返回
 60                         }
 61                         //清理定时炸弹
 62                         clearTimeout(t);
 63                         //点击时候,先清理定时器
 64                         clearInterval(timer);
 65                       t=setTimeout(function(){
 66                           timer=setInterval(run,2000);
 67                       },400)
 68                          //获得当前被点击li的序号
 69                          c=$(this).index();
 70                          //计算大DIV应该到达的Left的值
 71                          var left=c*-600;
 72                          //con元素向左移动,运动前要加stop()
 73                          
 74                          $("#box .con").stop().animate({"left":left+"px"},300);
 75                          //让当前的li透明度为0.9,兄弟li为0.7
 76                          $(this).css({opacity:0.9}).siblings().css({opacity:0.7});
 77                     })
 78               })
 79        </script>
 80     </head>
 81     <body>
 82         <div id="box">
 83             <div class="con">
 84                 <!-- img[src=http://www.mamicode.com/img/$.jpg]*5 -->
 85                 <img src="img/1.jpg" alt="" />
 86                 <img src="img/2.jpg" alt="" />
 87                 <img src="img/3.jpg" alt="" />
 88                 <img src="img/4.jpg" alt="" />
 89                 <img src="img/5.jpg" alt="" />
 90                 <!--复制一份第一张图片-->
 91                 <img src="img/1.jpg" alt="" /> 
 92             </div><!--end of con-->
 93             <ul>
 94                 <li style="opacity:0.9">包包</li>
 95                 <li>男装</li>
 96                 <li>女装</li>
 97                 <li>男鞋</li>
 98                 <li>女鞋</li>
 99             </ul>
100         </div>
101     </body>
102 </html>

效果图如下:

技术分享

学习课程网址:http://study.163.com/course/courseLearn.htm?courseId=1003498007#/learn/video?lessonId=1004152564&courseId=1003498007

JQ轮播图自动轮播效果及bug解决