<!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. 菜单栏—View（视图）菜单

  2. Python初学——窗口视窗Tkinter

    此篇文章是跟着沫凡小哥的视频学习的,附上学习网址:https://morvanzhou.github.io/tutorials/python-basic/ 什么是 tkinter 窗口1.1 什么是 ...

  3. Eclipse关闭项目

    Eclipse 关闭项目 为什么要关闭项目? Eclipse 工作空间包含了多个项目.一个项目可以是关闭或开启状态. 项目打开过多影响有: 消耗内存 占用编译时间:在删除项目.class 文件(Cle ...

  4. Python学习笔记2

    闭包 闭包用起来简单,实现起来可不容易. 另一个需要注意的问题是,返回的函数并没有立刻执行,而是直到调用了f()才执行.我们来看一个例子: def count(): fs = [] for i in ...

  5. 融会贯通——最常用的“合成复用原则”技能点Get

    复用一个类的时候,多使用对象的组合/聚合的关联关系,而不是继承. 之前提到的"依赖倒转原则",是以里氏代换原则为基础的实现开闭原则目标的手段,这一条路线涉及到的是类的继承(包括单继 ...

  6. 初学者入门web前端：C#基础知识：函数

    入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...

  7. Windows环境下最新OpenCV和Contribute代码的联合编译

    解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 一.工具的准备 1 tortoisegit www.tortoisegit.o ...

  8. Liunx-常用命令的总结(5)

    cd     ../dir        上一节目录下dir目录 cd -                    返回上次目录 ifconfig            查看IP地址 sudo   if ...

  9. 深入剖析java迭代器以及C#迭代器!

    目录: 知道迭代器接口Iterable 为什么java的for增强可以自动迭代 那些类可以被迭代 通过什么方法迭代 1.知道迭代器接口Iterable 解析: 迭代器(iterator)是一种对象,它 ...

  10. group by 详解

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...