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>
时间： 2024-10-11 11:03:46