jquery weui轮播图的使用
jquery weui的轮播图是对第三方插件swiper的一个封装，所以使用时需要引入对应的swiper.min.js文件
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>weui轮播图</title>
6 <link href="css/weui.min.css" rel="stylesheet">
7 <link href="css/jquery-weui.min.css" rel="stylesheet">
8 <style>
9 img{
10 width: 100%;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="swiper-container">
16 <div class="swiper-wrapper">
17 <div class="swiper-slide"><img src="img/1-2.png" alt=""></div>
18 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div>
19 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div>
20 </div>
21 <div class="swiper-pagination"></div>
22 </div>
23 <script src="js/jquery-3.2.1.min.js"></script>
24 <script src="js/jquery-weui.min.js"></script>
25 <script src="js/swiper.min.js"></script>
26 <script type="text/javascript">
27 var mySwiper = new Swiper('.swiper-container',
28 {
29 speed:1000,//播放速度
30 autoHeight:true,
31 loop:true,//是否循环播放
32 setWrapperSize:true,
33 autoplay:
34 {
35 delay: 5000,
36 disableOnInteraction: false,
37 },
38 pagination: '.swiper-pagination',//分页
39 effect : 'slide',//动画效果
40 }
41 );
42 </script>
43 </body>
44 </html>- 上一篇 »HTML/CSS，轮播图 - 小柴同学
- 下一篇 »css轮播图