简易jQuery轮播图插件

 

轮播图插件为简易的jQuery轮播图，实现点击无缝轮播，可用在移动端。

样式有问题，叠加修改即可。

 

下载地址：https://github.com/Summer-Lin/carousel

HTML代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>轮播图</title>
 6     <meta name="viewport"
 7           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 8     <link rel="stylesheet" href="jquery.carousel.css">
 9 </head>
10 
11 <body>
12     <div class="carousel">
13         <ul>
14             <li>
15                 <img src="images-images/15i58PIC8bY_1024.jpg" alt="">
16             </li>
17             <li>
18                 <img src="images-images/11bOOOPIC57_1024.jpg" alt="">
19             </li>
20             <li>
21                 <img src="images-images/42bOOOPIC17_1024.jpg" alt="">
22             </li>
23             <li>
24                 <img src="images-images/86bOOOPIC6f_1024.jpg" alt="">
25             </li>
26             <li>
27                 <img src="images-images/7169564_150201558312_2.jpg" alt="">
28             </li>
29             <li>
30                 <img src="images-images/11580677_090537203000_2.jpg" alt="">
31             </li>
32             <li>
33                 <img src="images-images/0018031184864859_b.jpg" alt="">
34             </li>
35             <li>
36                 <img src="images-images/CgQDr1PUudmAbC0sAAPmtISRmjM32500.jpg" alt="">
37             </li>
38         </ul>
39     </div>
40 
41 <script src="jquery-1.11.3.js"></script>
42 <script src="jquery.carousel.js"></script>
43  <script>
44      $(function () {
45          $('.carousel').carousel()
46      })
47  </script>
48 
49 </body>
50 </html>

 

posted @ 2017-07-28 14:39  笑笑~上善若水  阅读(1451)  评论(0)  编辑  收藏  举报