【竖直方向】间歇模型轮播图 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         *{
  8             padding:0;
  9             margin:0;
 10         }
 11         ul,ol{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16             color:#333;
 17         }
 18         .carousel{
 19             width: 278px;
 20             height: 78px;
 21             border: 1px solid #000;
 22             overflow: hidden;
 23             margin:50px auto;
 24             position: relative;
 25         }
 26         .carousel ul{
 27             width:300px;
 28             position: absolute;
 29             top:0px;
 30             height:6000px;
 31         }
 32         .carousel ul li{
 33             float: left;
 34             width: 78px;
 35             margin-right: 22px;
 36             height:78px;
 37             margin-bottom: 10px;
 38         }
 39 
 40     </style>
 41 </head>
 42 <body>
 43     <div class="carousel" id="carousel">
 44         <ul class="unit" id="unit">
 45             <li><img src="images/mingxing/0.jpg" alt=""></li>
 46             <li><img src="images/mingxing/1.jpg" alt=""></li>
 47             <li><img src="images/mingxing/2.jpg" alt=""></li>
 48             <li><img src="images/mingxing/3.jpg" alt=""></li>
 49             <li><img src="images/mingxing/4.jpg" alt=""></li>
 50             <li><img src="images/mingxing/5.jpg" alt=""></li>
 51             <li><img src="images/mingxing/6.jpg" alt=""></li>
 52             <li><img src="images/mingxing/7.jpg" alt=""></li>
 53             <li><img src="images/mingxing/8.jpg" alt=""></li>
 54             <li><img src="images/mingxing/9.jpg" alt=""></li>
 55             <li><img src="images/mingxing/10.jpg" alt=""></li>
 56         </ul>
 57     </div>
 58     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 59     <script type="text/javascript">
 60         // 获取元素
 61         var $carousel = $("#carousel");
 62         var $unit = $("#unit");
 63         var amount = $unit.children("li").length;
 64 
 65 
 66         // 信号量
 67         var idx = 0;
 68 
 69         // 补充空li
 70         if(amount % 3 == 1){
 71             // 补充2个空li
 72             $("<li></li><li></li>").appendTo($unit);
 73         }else if(amount % 3 == 2){
 74             // 补充1个空li
 75             $("<li></li>").appendTo($unit);
 76         }
 77 
 78         // 克隆前3张图片
 79         $unit.children("li:lt(3)").clone().appendTo($unit);
 80 
 81         console.log($unit.children().length); //15
 82 
 83 
 84         // 定时器
 85         var timer = setInterval(rightBtnFun, 2600);
 86         $carousel.mouseenter(function(){
 87             clearInterval(timer);
 88         });
 89         $carousel.mouseleave(function(){
 90             timer = setInterval(rightBtnFun, 2600);
 91         });
 92 
 93         // 右按钮的点击事件
 94         function rightBtnFun(){
 95             idx ++;
 96             // 先拉动
 97             $unit.animate({"top": -88 * idx},600,function(){
 98                 // 再判断
 99                 if(idx > $unit.children("li").length / 3 - 2){
100                     idx = 0;
101                     $unit.css("top",0);
102                 }
103             });
104         }
105 
106         
107         
108 
109 
110         
111 
112 
113 
114 
115     </script>
116 </body>
117 </html>

 

posted @ 2017-12-19 20:26  ︶ㄣ鳯躌氷瀚  阅读(266)  评论(0)    收藏  举报