基于Swiper实现移动端页面图片轮播效果


Posted in Javascript onDecember 28, 2017

使用Swiper开发移动端页面,轻松实现图片的轮播。

swiper

基于Swiper实现移动端页面图片轮播效果

1.主要包含模块:

swiper:指滑动、切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡))
container:指容器(swiper的容器里面包括滑动快(slide)的集合(wrapper)、分页器(pagination)、前进按钮等)
wrapper:指包含(触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移)
slider:指滑块(切换的块中的一个,可以包含文字、图片、html元素或另外一个swiper
pagination:指分页器(指示slide的数量和当前活动的slide)
active:指活动的,激活的(可视的(visible)slide是活动的,当可视slide不止一个时,默认最左边那个活动的)
callback:指回调函数(在某些情况下触发)

2.简单的轮播,如下所示:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<div class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <div class="swiper-wrapper"> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 </div> 
 <div class="swiper-pagination" style="width: 100px;float: right"></div><!--分页器-->、 
 <div class="swiper-button-prev"></div><!--前进按钮--> 
 <div class="swiper-button-next"></div><!--后退按钮--> 
</div> 
 
<script type="text/javascript"> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路(即:可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
</body> 
</html>

3.js中其他参数:

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果:(1)fade:淡入淡出;(2)cube:立方体;(3)coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布:1为在容器区域出现一张图;2:在容器区域出现两张图;3:在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左,设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值,值越大靠得越近*/ 
  depth:60,/*位置深度,值越大离Z轴越远,看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 })

注意:在使用swiper前,要引入swiper.css和swiper.js以及jQuery
具体可参考网址:点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
从vue源码看props的用法
Jan 09 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
JS实现带动画的回到顶部效果
Dec 28 #Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 #Javascript
You might like
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python 随机按键模拟2小时
2020/12/30 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
公司员工检讨书
2014/02/08 职场文书
市场营销工作计划书
2014/09/15 职场文书
户籍证明格式
2014/09/15 职场文书
仲裁协议书
2014/09/26 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
python 破解加密zip文件的密码
2021/04/22 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android