移动端图片轮播—swipe滑动插件
swipe是一个轻量级的移动滑动组件，它可以支持精确的触滑移动操作，能解决移动端对滑动的需求。
swipe插件的使用主要有四大块：
一、html
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
1.最外层的div的id是自定义的，这个是需要传入到swipe中的
2.最外层div的class="swipe"和第二层div的class="swipe-wrap"是写死的，swipe会查找这两个样式然后做相应的处理
3.第三层的div，是滑动元素的单元。第三层div里可加内容,都是以第三层div为单元进行滑动的
二、css
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
1.swipe、swipe-wrap、swipe-wrap > div，这3个是swipe里的样式是必须要用的
2.除此以外，可以对swipe-wrap > div设置一些其他样式，如居中、长、宽等
三、js
var mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 4, //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true, //无限循环的图片切换效果
disableScroll: true, //阻止由于触摸而滚动屏幕
stopPropagation: false, //停止滑动事件
callback: function(index, element) {}, //回调函数，切换时触发
transitionEnd: function(index, element) {} //回调函数，切换结束调用该函数
});
四、API(可选)
prev() //上一页
next() //下一页
getPos() //获取当前页的索引
getNumSlides() //获取所有项的个数
slide(index, duration) //滑动方法
API使用方法：
<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>
五、优缺点
1.优点：滑动与防滑性能不错，用户体验较好；Html结构简单，自定义较灵活
2.缺点：div的高度取决于切换内容最大高度，如果某个单元div无内容，那么会出现一个空白区域；
初始化后，第一、二、三层的div宽度固定；
dom结构固定，初始化后，插件对dom绑定事件，无法在js中增加滑动的dom结构；
滑动后才会触发swipe插件的callback和transitionEnd函数。
六、demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script src="/zepto.js"></script>
<script src="/swipe.js"></script>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.wrap-slide {
float:left;
width:100%;
position: relative;
display: -webkit-box; /*移动端图片居中显示*/
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
overflow: hidden; /*图片过大时，溢出div宽的隐藏，以免影响其他图片的滑动*/
}
.slide-img {
height: 300px; /*固定图片高*/
}
.loading {
position: absolute;
top: 120px;
left: 150px;
}
.mod-load{
text-align: center;
padding: 15px 0;
color: @fontColor4;
font-size: 12px;
}
@-webkit-keyframes loading{
0%{-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(180deg);}
100%{-webkit-transform: rotate(360deg);}
}
.icon-loading{
display: inline-block;
width: 15px;
height: 15px;
vertical-align: -4px;
margin-right: 6px;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-animation-name: loading;
-webkit-animation-duration: 1.2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: loading;
-moz-animation-duration: 1.2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.detail {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
box-sizing: border-box;
width: 100%;
}
.info {
-webkit-box-flex: 1;
}
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
word-break: break-all;
overflow: hidden;
-webkit-line-clamp: 1;
line-clamp: 1;
}
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
word-break: break-all;
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.num {
border-left: 1px solid #000;
padding-left: 5px;
max-width: 18%;
text-align: center;
}
</style>
</head>
<body>
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class="wrap-slide">
<img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551390.jpg"></img>
</div>
<div class="wrap-slide">
<img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551440.jpg"></img>
</div>
<div class="wrap-slide">
<img class='slide-img' data-src="http://tgi13.jia.com/115/551/15551388.jpg"></img>
</div>
</div>
</div>
<div class='detail'>
<div class='info'>
<div class='title'></div>
<div class='desc'></div>
</div>
<div class='num'></div>
</div>
<script>
var $img=$('.slide-img');
var $slide=$('.wrap-slide');
var $detail=$('.detail');
var $title=$('.title');
var $desc=$('.desc');
var $num=$('.num');
var windowHeight = $(window).height();
var pos=0;
var imgSrc=$img[pos];
var src;
var imgLoad;
var imgHeight;
var posHeight;
var detailHeight; loading();
lazyLoad(pos); var mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 0,
speed: 400,
continuous: false,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {
pos = index;
imgSrc = $img[pos];
if (imgSrc.hasAttribute('data-src')) {
loading();
lazyLoad(pos);
}else {
description(pos)
}
},
transitionEnd: function(index, elem) {}
}); //加载中...
function loading(){
var loadingHtml = '<div class="loading">'
+ '<div class="mod-load list-loading">'
+ '<img class="icon-loading" src="/loading.png">'
+ '加载中...'
+ '</div></div>';
$(loadingHtml).appendTo($slide);
} //图片延迟加载
function lazyLoad(pos){
src = $(imgSrc).attr('data-src');
$(imgSrc).attr('src',src).removeAttr('data-src');
imgLoad =document.querySelectorAll(".slide-img")[pos];
imgLoad.addEventListener("load",function(event){
$('.loading').remove();
description(pos);
});
} //图片描述
function description(pos){
$title.html('我是标题我是标题我是标题我是标题'+pos);
$desc.html('我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容'+pos);
$num.html(pos);
imgHeight= $img[pos].height;
detailHeight = $detail.height();
posHeight =imgHeight;
if(posHeight + detailHeight > windowHeight) {
$detail.css({
'top':windowHeight - detailHeight + 'px',
});
}else {
$detail.css({
'top':posHeight+'px',
});
}
}
</script>
</body>
</html>
图0正常显示；图1的图片宽度大于屏幕宽，居中显示，溢出隐藏；图2图片宽度小于屏幕宽度，居中显示。
移动端图片轮播—swipe滑动插件的更多相关文章
- Omi-touch实战 移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
- 移动端图片轮播效果：depth模式总结
最近公司app改版首页增加了一处轮播图效果,但是跟普通的轮播效果不同,是类似于下图的样式,找了一些兼容移动端的插件以及jQuery源码,总结一下使用心得: 1:jquery源码:缺点是在手机端的滑动很 ...
- 让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...
- 图片轮播器——jquery插件
下载:http://files.cnblogs.com/files/wordblog/jiaoben828.rar
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- 实现一个3D图片轮播插件 —— 更新版
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...
随机推荐
- 从一个简单的寻路问题深入Q-learning
这第一篇随笔实际上在我的科学网博客上是首发,我重新拿到博客园再发一次是希望以此作为我学习Q-learning的一个新的开始.以后这边主技术,科学网博客主理论.我也会将科学网那边技术类的文章转过来的.希 ...
- 8.openldap mirrormode(主主同步)
作者:yaoyao #MirrorMode双主模式 1.主机: ldap01.liuyao.com ldap02.liuyao.com 2.搭建LDAP服务 搭建过程省略,保证2台服务器部署配置一样即 ...
- 第7讲：SQL Server简介
SQL Server是微软公司提供的一款关系数据库管理系统. 操作数据库有两种方式:SQL语句和可视化的SSMS,该文章所有操作均基于SSMS. 一.SSMS(SQL Server Managemen ...
- “学霸系统”app——NABC
“学霸系统”客户端项目是我们小组本次的课题. 一.需求(need) 对于这款软件,我们的目标是在手机端移植并实现网页端已有的用户管理.搜索.分类.上传下载.用户贡献与交互等功能,从而完成从PC到终端的 ...
- Java第一次试验
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1352 姓名:朱国庆 学号:20135237 成绩: ...
- alpha版postmortem 报告
一.团队开发存在的问题 此次会议我们团队中每个成员都仔细思考并提出了团队在这一阶段存在的问题,主要如下: 1.前期任务规划.分配不合适: 2.个人对认领任务模块完成度.了解度不够: 3.个人学习意识. ...
- 第二次作业<1>
1001.A+B Format (20) ac代码 1. 解题思路 先求和,再输出. 答案区间为-2,000,000至2,000,000,将答案分为三个区段分类讨论.虽然觉得很烦但是想不出更好的方法. ...
- 结对项目-小学生四则运算系统(GUI)
Coding克隆地址:https://git.coding.net/FrrLolix/CalGUI.git 伙伴博客:http://www.cnblogs.com/wangyy39/p/8763244 ...
- 团队作业4--第一次项目冲刺2（Alpha版本）
1.会议 第二次会议: ①:总结第一天任务出现的问题 ②:安排下面两天的任务 2任务安排 3.任务分解图 4.燃尽图 5.适当的项目程序/模块的最新(运行)截图 6.心得 因为做前端的同学并不擅长这方 ...
- Scrum Meeting Beta - 8
Scrum Meeting Beta - 8 NewTeam 2017/12/7 地点:新主楼F座二楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了博文详情的存储Issue #150Pull ...