zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    SQL Server中的sysobjects
    SQL:事务(1)
    继续探究HTML与CSS:图像映射
    SQL:事务(2)
    找工作?该复习了!(转)
    继续探究HTML与CSS:!important 和 @import 规则
    JAVA数据结构:二叉树
    SQL:Like 通配符及特殊用法Escape
    JavaScript高级程序设计:在HTML中使用JavaScript
    一个有趣的时钟
  • 原文地址:https://www.cnblogs.com/cherryshuang/p/8491751.html
Copyright © 2011-2022 走看看