前端插件--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>
