基于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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
微信小程序实现留言功能
Oct 31 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 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
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
浅谈js中的this问题
2017/08/31 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python中包的用法及安装
2020/02/11 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
小学生常见病防治方案
2014/06/06 职场文书
先进工作者申报材料
2014/12/23 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS