【豎直方向】間歇模型輪播圖
阿新 • • 發佈：2017-12-20
定時 animate mount mat bottom fun java lan ons
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" ></li> 46 <li><img src="images/mingxing/1.jpg" ></li> 47 <li><img src="images/mingxing/2.jpg" ></li> 48 <li><img src="images/mingxing/3.jpg" ></li> 49 <li><img src="images/mingxing/4.jpg" ></li> 50 <li><img src="images/mingxing/5.jpg" ></li> 51 <li><img src="images/mingxing/6.jpg" ></li> 52 <li><img src="images/mingxing/7.jpg" ></li> 53 <li><img src="images/mingxing/8.jpg" ></li> 54 <li><img src="images/mingxing/9.jpg" ></li> 55 <li><img src="images/mingxing/10.jpg" ></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>
【豎直方向】間歇模型輪播圖