基于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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
微信小程序转发事件实现解析
Oct 22 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
PHP开发中常用的字符串操作函数
2011/02/08 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
tensorflow更改变量的值实例
2018/07/30 Python
python实现简单飞行棋
2020/02/06 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
python中的列表和元组区别分析
2020/12/30 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
视图的作用
2014/12/19 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
恒华伟业笔试面试题
2015/02/26 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
大班亲子运动会方案
2014/06/10 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书