jquery weui的轮播图是对第三方插件swiper的一个封装,所以使用时需要引入对应的swiper.min.js文件
1 <!DOCTYPE html> 2 <html lang="en"> 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>
来源:https://www.cnblogs.com/cherryshuang/p/8491751.html