基于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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
javascript轮播图算法
Oct 21 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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实现斐波那契数列的简单写法
2014/07/19 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
英文自荐信
2013/12/15 职场文书
上课迟到检讨书
2014/01/19 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python