基于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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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下删除字符串中HTML标签的函数
2008/08/27 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python如何生成树形图案
2018/01/03 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
大学同学会活动方案
2014/08/20 职场文书
九寨沟导游词
2015/02/02 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js