Swiper.js使用方法
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/swiper.min.css">
</head>
<body>
...
<script src="path/swiper.min.js"></script>
</body>
</html>
案例一：banner广告图片轮播
<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>
<script type="text/javascript">
var mySwiper = new Swiper('.banner-container',{
loop: true, //用来循环播放
pagination: '.banner-pagination', //显示焦点按钮
paginationClickable: '.banner-pagination', //焦点按钮可点击
});
setInterval("mySwiper.slideNext()", 2000); //加定时器的目的是：点击焦点按钮后，自动播放你所点击的那张图片的下一张
</script>
案例二：无缝滑动（不知道叫什么）
<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>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 'auto',
spaceBetween: 24,
});
</script>
<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>
<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使用方法的更多相关文章
- js文件中模块化导入swiper.js文件方法
es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...
- Swiper教程 —— 使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- 移动端开发（四）：swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...
- swiper.js的使用
点击api文档地址, (1)图片轮播banner <script src="js/jquery-2.1.4.min.js"></script> <sc ...
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
随机推荐
- MySQL整数类型说明 int(5) vs int(7)
今天突然发现, mysql 中int(1)和tinyint(1)中的1只是指定显示长度,并不表示存储长度,只有字段指定zerofill时有用.位数限制基本没有意义. int(5) 这里的5表示的是 最 ...
- CSS display和visibility的用法和区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...
- IPsec_VPN实现技术【转载】
GRE Tunnel GRE Tunnel(General Routing Encapsulation 通用路由封装)是一种非常简单的VPN(Virtual Private Network 虚拟专用网 ...
- 团队作业4——第一次项目冲刺（Alpha版本） 2
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.完成了大部分查重算法的书写. 余弦查重算法 2.其他非主页面的部分设计. 查重过程的显示页面 四.困难与问题 1.算法是程 ...
- 团队作业8----第二次项目冲刺（Beta阶段） 第三天
BETA阶段冲刺第三天 1.小会议ing 2.每个人的工作 (1) 昨天已完成的工作 注册账号时时添加了账号相同不能添加的功能,以防两个账号一样的情况: 老师账号注册时添加一个密令: (2) 今天计划 ...
- Swing-JRadioButton用法-入门
JRadioButton是Swing中的单选框.所谓单选框是指,在同一个组内虽然有多个单选框存在,然而同一时刻只能有一个单选框处于选中状态.它就像收音机的按钮,按下一个时此前被按下的会自动弹起,故因此 ...
- sudoku--设想
在查阅了一些资料和自己动手写一写后,找到一种可行的解法. 第一步 首先将9x9的数独方格分成九份3x3的九宫格,如下图 B1 B2 B3 B4 B5 B6 B7 B8 B9 而后在左上角的B1上随机生 ...
- 201521123095 《Java程序设计》第7周学习总结
1. 本章学习总结 **2. 书面作业* 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 该源代码验证该ArrayList中是否包含某个对象,contains的 ...
- 201521123038 《Java程序设计》 第五周学习总结
201521123038 <Java程序设计> 第五周学习总结 1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.ja ...
- 201521123011 《Java程序设计》 第三周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...