移动web中的幻灯片切换效果
百度或者谷歌下类似的插件有很多,原理都差不多,关键适合自己的项目,如果移动端要引入jquery这么大的插件,只能呵呵了....
下面是工作中针对webkit内核的浏览器写的,html很简单:
<section id="banner" class="banner z-c" >
<ul class="z-c-w">
<li class="z-c-i"></li>
</ul>
</section>
上面的li标签实际都可以动态生成的,这里只是为了方便阅读才加上。
css:
.banner {
position:relative;
overflow:hidden;
border-bottom:1px solid #FFFDFB;
font-size:;
}
.z-c-w {
display:-webkit-box;
width:100%;
height:100%;
}
.z-c-w.transitionable {
-webkit-transition:-webkit-transform 0.25s ease;
}
.z-c-i {
display:block;
width:100%;
}
.z-c-p {
position: absolute;
margin-top: -13px;
width: 100%;
text-align: center;
}
.z-c-p span {
display:inline-block;
width:6px;
height:6px;
margin:0 4px;
border-radius:50%;
border:1px solid #7cca26;
}
.z-c-p span.active {
background-color:#7cca26;
}
.z-c-i .img-wrapper{
display: inline-block;
width:100%;
height:100%;
background: #fafafa url('../images/cart_icon.png') no-repeat center center;
}
.z-c-i a{display: block;}
.z-c-i .img-wrapper img{width:100%;}
javascript:需要引入zepto,zepto压缩后不到10k,是移动端开发不错的js库。
/*
* carousel
*/
;(function($) {
$.extend($.fn, {
carousel : function(obj) {
this.each(function(){
// 当前Zepto对象
var $self = $(this); var dom = {
wrap : $self.find(".z-c-w"),
items : $self.find(".z-c-i"),
pageControl : null,
pageItems : null
};
var settings = {
width : dom.wrap.width(),
count : dom.items.size(),
index : 0,
startX : 0,
startY : 0,
movingX : false,
movingY : false,
distance : 0,
pageControl : obj ? (obj.showControl ? true : false) : true,
autoScroll : obj ? (obj.autoScroll ? true : false) : false
};
var funs = {
init : function() {
funs.initUI();
funs.bindEvent();
if (settings.autoScroll) {
settings.interval = setInterval(funs.autoScroll, 5000);
}
},
bindEvent : function() {
dom.wrap.off().on({
"touchstart" : function(e) {
e.stopPropagation();
e.preventDefault();
settings.width = dom.wrap.width();
settings.distance = settings.width / 4; settings.startX = e.touches[0].pageX;
settings.startY = e.touches[0].pageY; if (settings.autoScroll){
clearInterval(settings.interval);
//隐藏最后一个循环页
dom.dupItem.css("visibility", "hidden");
}
},
"touchmove" : function(e) {
e.stopPropagation();
e.preventDefault();
var currentX = e.touches[0].pageX;
var currentY = e.touches[0].pageY;
var dX = currentX - settings.startX;
var dY = currentY - settings.startY; if (settings.movingX) {
e.stopPropagation();
e.preventDefault();
var x = 0;
if (settings.index == 0 && dX > 0 || settings.index == settings.count - 1 && dX < 0) {
x = -settings.index * settings.width + dX / 3;
} else {
x = -settings.index * settings.width + dX;
}
dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)");
} else if (!settings.movingY) {
e.stopPropagation();
var dX = Math.abs(dX);
var dY = Math.abs(dY);
if (dX > 10 && dX/dY > 1) {
settings.movingX = true;
settings.movingY = false;
} else if(dY > 10 && dX/dY < 1) {
settings.movingY = true;
settings.movingX = false;
}
}
},
"touchend" : function(e) {
e.stopPropagation();
e.preventDefault();
settings.movingY = false;
if (settings.movingX) {
settings.movingX = false;
var currentX = e.changedTouches[0].pageX;
var distance = currentX - settings.startX;
if (Math.abs(distance) >= settings.distance) {
settings.index = settings.index - Math.abs(distance) / distance;
settings.index = settings.index < 0 ? 0 : (settings.index > (settings.count - 1) ? (settings.count - 1) : settings.index);
}
funs.continueMove();
}
if (settings.autoScroll) {
settings.interval = setInterval(funs.autoScroll, 5000);
setTimeout(function(){
dom.dupItem.css("visibility", "visible");
},250);
}
},
"webkitTransitionEnd" : function() {
dom.wrap.removeClass("transitionable");
if(settings.index >= settings.count){
settings.index %= settings.count;
dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
}
}
});
dom.pageControl.off().on("touchstart", function(e) {
settings.width = dom.wrap.width();
settings.distance = settings.width / 4; var touchX = e.touches[0].pageX;
var currentX = $(dom.pageItems[settings.index]).offset().left;
if (touchX > currentX && settings.index < (settings.count - 1)) {
settings.index += 1;
funs.continueMove();
} else if (touchX < currentX && settings.index > 0) {
settings.index -= 1;
funs.continueMove();
}
});
$(window).on({
"resize" : function() {
funs.adjustPOS();
},
"orientationchange" : function() {
funs.adjustPOS();
}
});
},
adjustPOS : function() {
settings.width = dom.wrap.width();
settings.distance = settings.width / 5;
dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
},
continueMove : function() {
dom.wrap.addClass("transitionable");
dom.pageItems.removeClass("active");
$(dom.pageItems[settings.index % settings.count]).addClass("active");
dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
},
initUI : function() {
settings.distance = settings.width / 4;
if (settings.pageControl) {
$self.append(funs.createPageDOM());
}
dom.pageControl = $self.find(".z-c-p");
dom.pageItems = $self.find(".z-c-p>span"); if(settings.autoScroll){
//重复第一个页面用作尾部的循环
funs.dupFirstItem();
}
},
dupFirstItem : function() {
dom.dupItem = $self.find(".z-c-i:first-child").clone();
$(dom.wrap).append(dom.dupItem);
},
createPageDOM : function() {
var pageControlToRemove = $self.find(".z-c-p");
if (pageControlToRemove.length) {
pageControlToRemove.remove();
}
var pageFragment = document.createDocumentFragment();
var pageDiv = document.createElement("div");
pageDiv.setAttribute("class", "z-c-p");
pageFragment.appendChild(pageDiv);
var pageItemSpan = document.createElement("span");
pageItemSpan.setAttribute("class", "active");
pageDiv.appendChild(pageItemSpan);
for (var i = 1; i < settings.count; i++) {
pageItemSpan = document.createElement("span");
pageDiv.appendChild(pageItemSpan);
}
return pageFragment;
},
clear : function() {
var pageControlToRemove = $self.find(".z-c-p");
if (pageControlToRemove.length) {
pageControlToRemove.remove();
}
dom.wrap.empty().css("-webkit-transform", "translate3d(0,0,0)");
},
autoScroll : function() {
if(dom.wrap.width() > 0 && dom.items.width() > 0){
settings.index++;
settings.width = dom.wrap.width();
funs.continueMove(settings.index);
}
}
}; funs.init(); $self.clear = funs.clear;
}); return this;
}
});
})(Zepto);
调用方法:
$("#banner").carousel({
showControl: true,
autoScroll: true
});
ps:切记在触屏事件的时候加上e.stopPropagation();和e.preventDefault,不然在android低端浏览器会有卡顿现象
移动web中的幻灯片切换效果的更多相关文章
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- javascript实现的有缩略图功能的幻灯片切换效果
不久前写了一个简单的图片效果,没想到那么快就要用到项目中,所以功能方面要丰富一下: 主要改进: 1# 用圆点代替之前简单的页数显示,并且点击圆点可以显示对应图片: 2# 点击圆点,显示对应图片的缩略图 ...
- Android 自定义 ViewPager 打造千变万化的图片切换效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主 ...
- Axure RP Pro 7.0苏宁易购式标签切换效果教程
转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...
- Android App中使用Gallery制作幻灯片播放效果
http://www.jb51.net/article/83313.htm 我们有时候在iPhone手机上或者Windows上面看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果 ...
- Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
- HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
- 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果(按轨迹移动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- NOIP模拟题汇总(加厚版)
\(NOIP\)模拟题汇总(加厚版) T1 string 描述 有一个仅由 '0' 和 '1' 组成的字符串 \(A\),可以对其执行下列两个操作: 删除 \(A\)中的第一个字符: 若 \(A\)中 ...
- 玩转MongoDB
一.主从复制 1)首先主从服务器在启动的时候,分别要设置master.slave选项,对于slave可以启动中设置源,也可以在启动后设置源. 如:主:mongod --dbpath=/data/mon ...
- FlutterToast 使用
参看 FlutterToast 开源库 https://github.com/PonnamKarthik/FlutterToast
- 换个角度看Salesforce之基础配置学习笔记(二)
1. 登录后无法使用Developer Console? 先找到当前登录用户的Profie,然后勾选Profile中的View All Data(Modify All Data)即可: 2. Pers ...
- 读取Cert格式证书的密钥
不想存储Cert证书内容,只想存储证书密钥,可通过以下实现读取证书的密钥出来: package com.zat.ucop.service.util; import sun.misc.BASE64Enc ...
- Python练习 | WebServer
#-*- coding:utf-8 -*- import sys, os from http.server import BaseHTTPRequestHandler, HTTPServer #--- ...
- EasyNetQ自定义异常消息处理
20140310补充: rabbitmq有requeue属性,可以选择消息是否返回队列,另,本文的解决方式非常之山寨,只能应用于发送和接收方式. 这几天在折腾消息队列,在.Net环境下有基于Rabbi ...
- ztree树样式的设计
ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...
- mongodb3.4 远程连接认证失败
mongodb开启或者关闭授权功能时还是挺麻烦的,需要新建服务键入mongod --auth.为了方便,我这里是建了两个服务,用到哪个就切换至哪个服务. --需要授权 mongod --logpath ...