基于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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
js 处理URL实用技巧
2010/11/23 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
使用Python对SQLite数据库操作
2017/04/06 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
《庐山的云雾》教学反思
2014/04/22 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
2019销售早会主持词
2019/06/27 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS