jquery weui轮播图的使用_weixin_30419799的博客-程序员秘密

技术标签: ViewUI  javascript  

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30419799/article/details/96301867

智能推荐

Linux 下的图形库介绍_many086的博客-程序员秘密

Linux 下的图形库介绍在进行Linux下的图形系统编程时,我们常常会遇到以下这些概念:Framebuffer, X11, SDL,DFB, miniGUI, OpenGL,QT, GTK,KDE, GNOME等等。一、Linux 图形领域的基础设施 1.1 X Window X Window从逻辑上分为三层:X Server、X Client和X协议。最底层的X

开源大数据分析引擎Impala实战 笔记_图特摩斯科技的博客-程序员秘密

第三章 Impala 概念及架构 3.1 Impala服务组件 3.1.1 Impala Deamon 该进程运行于集群每个节点的守护进程,是Impala的核心组件,每个节点该进程的名称为 impalad 。 > ps -ef|grep impalad 负责读取数据文件;接受来自impala-shell、Hue / JDBC/ODBC的查询请求,与其他节点并行分

VS 2015 配置 python_流浪猪头拯救地球的博客-程序员秘密_vs2015配置python

关于这个问题,已经有现成的优秀博客了,我只是一个搬运工第一步:https://jingyan.baidu.com/article/09ea3ede50963dc0aede39f2.html第二步:https://blog.csdn.net/gloria_iris/article/details/81508867

虚拟光驱打开.bin 文件_CrazZy651314的博客-程序员秘密_虚拟光驱bin文件

近期想装rose,百度下载了rose.zip文件,解压后发现不是.iso文件,而是.bin文件,百度了许久,都说是拿虚拟光驱DAEMON Tools list 装载就可以打开了,然而我试了许久,怎么都打不开。才发现DAEMON Tools list 有时候是打开不了.bin文件的,而我就在这个时候遇到了(瞬间懵逼。。。。。。),因为.bin文件里面的东西太复杂。找了许久发现有一个办法可以解决,将

Thinkpad x1 carbon 2022,2021 各个版本CPU性能对比_java硕哥的博客-程序员秘密_x1carbon哪代最好

i7-1260P原文链接Intel Core i7-1260P是一款 12 核的移动处理器,于 2022 年第一季度推出。它是酷睿 i7 系列的成员,采用 BGA 1744 的 Alder Lake-P 架构。支持英特尔超线程技术,达到 16 个线程。 Core i7-1260P 具有 18MB 的三级缓存,默认运行频率为 2.1 GHz,但根据工作负载可提升至 4.7 GHz。酷睿 i7-1260P基于 10 纳米生产工艺制造。Core i7-1260P 的 TDP 为 28 W,处理器支持双通道接

哈理工计算机分数线2020,2021哈尔滨理工大学研究生分数线一览表(含2019-2020历年复试)..._weixin_39774491的博客-程序员秘密

考研选择院校和专业时,2021哈尔滨理工大学研究生分数线是2022届考研非常重要的参考数据,体现了报考院校和专业的难易程度,为了方便大家查询,大学帮已经为大家整理好了2016-2021历年哈尔滨理工大学研究生复试分数线一览表,供大家参考,真切希望大家都能考上自己满意的学校。1、2021年哈尔滨理工大学研究生分数线复试分数线1、学术学位学科门类(专业)名称总分单科(满分=100分)单科(满分&gt;...

随便推点

Javaweb项目有Service层和Dao层的情况下,为什么要额外加入他们的实现类(imp),而他们本身缺作为接口,不直接写方法?_过气蟹黄堡的博客-程序员秘密

问题出现场景最近练习Javaweb项目,在跟随视频练习的时候。发现与我之前学习时候很多不同的地方。这里是一个关于实现类的问题。在项目中,Service 层和 Dao 层,这两个层本身不在写实际的代码内容,而是作为一个接口,同时,编写一个他们的实现类,在他们的实现类内写一些实际的代码。而他们本身仅仅是调用这些实现类内的方法。很显然,Service 层和 Dao 层本身是可以直接写实际的代码的...

深入理解HTML5之标签与文档结构_Singh1995的博客-程序员秘密

在HTML5出现以前,HTML的文档结构不够清晰、明确。我们会发现整个页面的头部、主体、页脚、导航,还有边栏皆是使用DIV元素来构成。我在学习前端的过程中也经常能看到诸如《DIV+Css》教程之类的书籍,但是&lt;div&gt;并不是一个很能表示文档结构的标签,特别对于搜索引擎和屏幕阅读器来说过多的使用&lt;div&gt;元素,那么这些程序就连“从哪里到哪里是正文”“这个&lt;ul&gt;元素是表示导航菜单,还是表示项目列表”等对于结构分析来说最基本的答案也都不知道。首先简单看下HTML5的文

【转】C++map排序方法_CtrlZ1的博客-程序员秘密_c++ map排序

&lt;转载&gt;原文链接:https://blog.csdn.net/chengqiuming/article/details/89816566一 点睛map的排序默认按照key从小到大进行排序,但有以下几点需要注意:1 按照key从大到小进行排序。2 key的第1个元素是结构体。3 想按value(第二个元素)排序。二 让map中的元素按照key从大到小排序1 代码#include &lt;map&gt;#include &lt;string&gt;#include &lt;ios

H.264 SDP中 profile-level-id字段的含义_zds05的博客-程序员秘密

profile-level-id正好是SPS中的第二至四个字节的base16编码。这三个字节的具体含义是sps[1]  AVCProfileIndicationsps[2]  profile_compatibilitysps[3]  AVCLevlIndication如何设值,可以参考 x264/common/set.h,encoder/set.c

【Nordic】52832测试TWI(I2C)与LIS2DW12通信_高翔Sean的博客-程序员秘密

PJM突然怀疑一个加速度传感器的问题,但fw是客户给的bin文件,没办法debug,只能自己用nordic的demo改一个,测测看。先看了一下LIS2DW12.pdf的datasheet,把各个寄存器和可能用到的值记下来。#ifndef LIS2DW12_CFG_H#define LIS2DW12_CFG_H#include &lt;stdint.h&gt;/* REGI...

2014ACM-ICPC 西安赛区总结_weixin_30877181的博客-程序员秘密

万万没想到,打铁了。以前一直觉得拿铁咖啡的梗是很好笑的,然后有一天这杯咖啡自己喝下去了,就会发现心里真的被梗住了。复旦的题其实我是有预料到的,前年的复旦题三题从金区到铜区都有,但是从去年的南京赛区开始,数学之风感觉就没有那么盛行了,出题人也说了出的题都是比较可做的,去年南京赛区就是因为知识点不足,始终出不了轮廓线的dp或者是那道树分治的题,所以没有能拿到银。今年我想着复旦出题的风格应...

推荐文章

热门文章

相关标签