<!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. 微信小程序周报（第十三期）-极乐商店(store.dreawer.com)出品

    重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句 ...

  2. Composer简介及使用实例

    1.PHP-FIG 官网:http://www.php-fig.org/ php编码规范: 本文档是PHP互操作性框架制定小组(PHP-FIG :PHP Framework Interoperabil ...

  3. MongoDB对应SQL语句

    -------------------MongoDB对应SQL语句------------------- 1.Create and Alter     1.     sql:         crea ...

  4. vue echarts 遇到的bug之一 无法渲染的问题

    图表示这样的 页面上有很多个图表,由于没有查询按钮,就只是点击发送ajax数据,所以把所有图表的方法放在updated中, 功能是实现了没问题,但是加载页面的时候会发送很多的ajax请求,而且点击修改 ...

  5. poj 1986LCA离线dfs+并查集

    题意,给出边和权值,求出两个点间的最短距离. 用离线算法的时候有个地方不知道怎么处理了.在线的本来想用倍增的,但发现倍增算法貌似需要预处理深度而不是权值,不知道怎么处理.套一个rmq的模板吧,用来处理 ...

  6. UVW代码漫谈（一）

    博客园是个非常好的学习知识的地方,相信有很多人跟我一样,园龄3年,从博客园不知道拷了多少代码,看了多少博客,自己却一篇博客都没写过.真是罪过. 这次准备写几篇关于这个项目源码的阅读和理解的文章,大家一 ...

  7. CSS基础知识摘要

    元素分类 块级元素 什么是块级元素?在html中<div>. <p>.<h1>.<form>.<table>.<ul> 和 &l ...

  8. 团队作业4——第一次项目冲刺（Alpha版本） 3

    一.Daily Scrum Meeting照片 二.燃尽图 注:由于前两天燃尽图制作不准确,所以重新制作一个,现已由工作量改为功能数,工作日从今天开始. 三.项目进展 功能: 算法这一块已全部完成 文 ...

  9. 团队作业8----第二次项目冲刺（Beta阶段） 第六天

    BETA阶段冲刺第六天 1.小会议ing 2.每个人的工作 (1)昨天已完成的工作 重复部分可以用红色字体显示 (2) 今天计划完成的工作 (3) 工作中遇到的困难: 尤少辉:在测试的时候,当队友提出 ...

  10. 201521123004 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:从ArrayList ...