前端插件--swiper.js

使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件：

swiper官方文档：http://www.swiper.com.cn/api/effects/193.html

实例：

示例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="./css/swiper.css">
 7     <style>
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         ul{
13             list-style: none;
14         }
15         .swiper-container {
16             width: 600px;
17             height: 300px;
18             box-sizing: border-box;
19         }
20         .swiper-slide > a{
21             width: 100%;
22             display: block;
23         }
24         .swiper-slide > a > img{
25             width: 100%;
26             display: block;
27         }
28     </style>
29     <script src="./js/swiper.js"></script>
30 </head>
31 <body>
32 <!--需要的是下面这样的结构，而不是下面这样的标签，意味着标签名称可以随意-->
33 <div class="swiper-container">
34     <ul class="swiper-wrapper">
35         <li class="swiper-slide">
36             <a href="javascript:;">
37                 <img src="./images/l1.jpg" alt="">
38             </a>
39         </li>
40         <li class="swiper-slide">
41             <a href="javascript:;">
42                 <img src="./images/l2.jpg" alt="">
43             </a>
44         </li>
45         <li class="swiper-slide">
46             <a href="javascript:;">
47                 <img src="./images/l3.jpg" alt="">
48             </a>
49         </li>
50         <li class="swiper-slide">
51             <a href="javascript:;">
52                 <img src="./images/l4.jpg" alt="">
53             </a>
54         </li>
55         <li class="swiper-slide">
56             <a href="javascript:;">
57                 <img src="./images/l5.jpg" alt="">
58             </a>
59         </li>
60         <li class="swiper-slide">
61             <a href="javascript:;">
62                 <img src="./images/l6.jpg" alt="">
63             </a>
64         </li>
65         <li class="swiper-slide">
66             <a href="javascript:;">
67                 <img src="./images/l7.jpg" alt="">
68             </a>
69         </li>
70         <li class="swiper-slide">
71             <a href="javascript:;">
72                 <img src="./images/l8.jpg" alt="">
73             </a>
74         </li>
75     </ul>
76 </div>
77 <script>
78     var mySwiper = new Swiper('.swiper-container', {
79         autoplay:2000,//可选选项，自动滑动
80         loop : true,
81         effect : 'cube',
82     })
83 </script>
84 </body>
85 </html>

 

posted @ 2018-01-15 21:05  QinXiao.Shou  阅读(398)  评论(0)  编辑  收藏  举报