<!DOCTYPE html>

     <html>

         <head>

             ...

             <link rel="stylesheet" href="path/swiper.min.css">

         </head>

         <body>

             ...

             <script src="path/swiper.min.js"></script>

         </body>

     </html>
 
案例一：banner广告图片轮播

html如下：
注（swiper-开头的class名称都是插件自带样式的，需要加上）
 <div class="banner-container swiper-container">

     <div class="swiper-wrapper">

         <div class="banner-slide swiper-slide">

             <a href="javascript:viod(0);"><img src="data:images/banner/bannerImg01.png"></a>

         </div>

         <div class="banner-slide swiper-slide">

             <a href="javascript:viod(0);"><img src="data:images/banner/bannerImg02.png"></a>

         </div>

         <div class="banner-slide swiper-slide">

             <a href="javascript:viod(0);"><img src="data:images/banner/bannerImg03.png"></a>

         </div>

         <div class="banner-slide swiper-slide">

             <a href="javascript:viod(0);"><img src="data:images/banner/bannerImg04.png"></a>

         </div>

     </div>

 　　<!--需要焦点按钮时加这段div-->

     <div class="banner-pagination pagination">

         <span></span>

     </div>

 </div>
js如下:
 <script type="text/javascript">

     var mySwiper = new Swiper('.banner-container',{

         loop: true, //用来循环播放

         pagination: '.banner-pagination', //显示焦点按钮

         paginationClickable: '.banner-pagination', //焦点按钮可点击

     });

     setInterval("mySwiper.slideNext()", 2000); //加定时器的目的是：点击焦点按钮后，自动播放你所点击的那张图片的下一张

 </script>

案例二：无缝滑动（不知道叫什么）

html如下：
注（swiper-开头的class名称都是插件自带样式的，需要加上）
 <div class="store-container swiper-container">

     <div class="swiper-wrapper">

         <!--swiper-slide为一本书-->

         <div class="swiper-slide">

             <dl>

                 <dt>

                     <img src="data:images/book/book01.png" />

                 </dt>

                 <dd>

                     <h6>我怀疑人们在密谋让我幸福</h6>

                     <span>张玮佳</span>

                     <p>当我们谈起生活时当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>

                 </dd>

             </dl>

         </div>

         <!--swiper-slide为一本书-->

         <div class="swiper-slide">

             <dl>

                 <dt>

                     <img src="data:images/book/book02.png" />

                 </dt>

                 <dd>

                     <h6>世界上有趣的事太多</h6>

                     <span>张玮佳</span>

                     <p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>

                 </dd>

             </dl>

         </div>

         <!--swiper-slide为一本书-->

         <div class="swiper-slide">

             <dl>

                 <dt>

                     <img src="data:images/book/book06.png" />

                 </dt>

                 <dd>

                     <h6>舍得，舍不得</h6>

                     <span>蒋勋</span>

                     <p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>

                 </dd>

             </dl>

         </div>

     </div>

 </div>
js如下：
 <script type="text/javascript">

     var mySwiper = new Swiper('.swiper-container',{

         slidesPerView: 'auto',

         spaceBetween: 24,

     });

 </script>
案例三：无缝滑动2（不知道叫什么）
html如下：
注（swiper-开头的class名称都是插件自带样式的，需要加上）
 <div class="column-container swiper-container">

     <div class="column-wrapper swiper-wrapper">

         <div class="column-slide swiper-slide">

             <a href="bookClassify.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg01.png" />

                 </div>

                 <p>分类</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="newBook.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg03.png" />

                 </div>

                 <p>新书</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="freeBook.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg02.png" />

                 </div>

                 <p>免费</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="hotSale.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg04.png" />

                 </div>

                 <p>热销</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="store.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg05.png" />

                 </div>

                 <p>书店</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="bookClassify.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg01.png" />

                 </div>

                 <p>分类</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="newBook.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg03.png" />

                 </div>

                 <p>新书</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="freeBook.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg02.png" />

                 </div>

                 <p>免费</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="hotSale.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg04.png" />

                 </div>

                 <p>热销</p>

             </a>

         </div>

         <div class="column-slide swiper-slide">

             <a href="store.html">

                 <div class="column-bg">

                     <img src="data:images/column/columnImg05.png" />

                 </div>

                 <p>书店</p>

             </a>

         </div>

     </div>

 <!--需要焦点按钮时加这段div-->

     <div class="column-pagination pagination">

         <span></span>

     </div>

 </div>
js如下：
 <script type="text/javascript">

     var mySwiper = new Swiper('.column-container',{

         loop: true, //用来循环播放

         pagination: '.column-pagination',

         slidesPerView: 'auto',

         paginationClickable: true,

         slidesPerGroup: 5, //每次滑动5个

         speed: 600 //滑动的速度

     });

 </script>

（本文原创，转载请注明出处！！）

Swiper.js使用方法的更多相关文章

  1. js文件中模块化导入swiper.js文件方法

    es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...

  2. Swiper教程 —— 使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  3. 移动端开发（四）：swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  4. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  5. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  6. swiper.js 多图片页面的懒加载lazyLoading

    swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...

  7. swiper.js的使用

    点击api文档地址, (1)图片轮播banner <script src="js/jquery-2.1.4.min.js"></script> <sc ...

  8. swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

    使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...

  9. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

随机推荐

  1. 采用OCR识别自动识别财务报表

    一.         财务报表有什么作用 财务报表又叫会计报表,包含:资产负债表.损益表.现金流量表三表.财务报表对企业经营状况有重要的参考意义: n  全面系统地揭示企业一定时期的财务状况.经营成果 ...

  2. java 基础三

    1 运算符 1.1  比较运算符 比较运算符的结果都是boolean类型,也即是要么是true,要么是false. 比较运算符"=="不能写成"=". > ...

  3. 双T型陷波滤波器

    有时,我们需要设计个滤波器滤除特定一个频率的噪音.这时就需要陷波滤波器了. 陷波器是带阻滤波器的一种,带阻滤波器的滤除频率有一定宽度,而陷波就是对某一个频率噪音的滤除. 双T型陷波滤波器应该是最常见的 ...

  4. HTTP Components简介

    基于版本4.5.x 简介 组件 HttpClient,核心组件 HC Fluent,提供了流式操作接口 HttpMime,提供文件上传时用到的一些工具类 HttpClient Cache,有待学习 H ...

  5. Html5笔记之第六天

    Canvas元素 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. <c ...

  6. K/3 WISE V14.3官方原版云盘下载地址及培训PPT

    电梯直达 楼主    发表于 15 分钟前 | 只看该作者    查看 : 10|回复 : 0 金蝶K/3 WISE打造企业"智造力",为企业财务管理决策提供全方位信息,产.供.销 ...

  7. spring mvc:ueditor跨域多图片上传失败解决方案

    公司在开发一个后台系统时需要使用百度的UEditor富文本编辑器,应用的场景如下: UEditor的所有图片.js等静态资源在一个专有的静态服务器上: 图片上传在另外一台服务器上: 因为公司内部会使用 ...

  8. C# .NET Socket 简单实用框架

    背景: 首先向各位前辈,大哥哥小姐姐问一声好~ 这是我第一次写博客,目前为一个即将步入大四的学生,上学期在一家公司实习了半年,后期发现没有动力,而且由于薪水问题(废话嘛),于是跳槽到这家新的公司. 说 ...

  9. java8 去掉 perm 用 Metaspace 来替代

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt266 正如大家所知,JDK 8 Early Access版已经提供下载.这使 ...

  10. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...