• jquery weui轮播图的使用


    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>
  • 相关阅读:
    nuxt.js 学习与记录
    图片上传预览 接收
    k8s之deployment
    k8s之service
    k8s的一些命令
    ansible 学习
    k8s之ConfigMap && secret
    k8s 之Job/CronJob
    k8s之PV & PVC
    配置ssh免密登录
  • 原文地址:https://www.cnblogs.com/cherryshuang/p/8491751.html
Copyright © 2020-2023  润新知