朋友炒股两个月赚了10万，我帮他推广一下公众号，把钱用来投资总比放银行连通货膨胀都跑不过里强， 硬核离职，在家炒股 ，这是他每天的日志，有些经验是花钱也买不到的。
一、前言
去年接触了移动Web开发，做了些手机端的网站及应用，还有些小的微信游戏和活动页面。每个项目里或多或少的都会有一些触屏事件等。其中有两个用到了jquery触屏幻灯片。刚开始的时候也在百度上搜索了一翻，但最终都没有找到合适的，因此就觉得自己写一个了。下面的例子是我在已前的项目里摘出来的，对于触屏本人也不算老鸟，有写的不足的地方请大家提出反馈意见。附件为源码和使用教程，该幻灯片兼容安卓、iphone、和大winphone手机。可放心使用。使用时请注明版权及出处。
二、内容
幻灯片切换：屏幕的可视区域根据手指触发屏幕的滑动来动态切换需要展示的图片，这里涉及到两个过程：
一、触屏事件监控，手指针对于触屏的滑动事件。
W3C标准针对触屏操作主要用到三大块内容：事件、Touch对象、TouchEvent对象。
共有4个事件：touchstart、touchmove、touchend、touchcancel
(1)touchstart：触摸点触摸到触屏表面时触发。
(2)touchmove：触摸点在触屏上移动时触发。
(3)touchend：触摸点离开触屏上时触发。
(4)touchcancel：触摸点取消时触发。
常用的事件有3种：touchstart、touchmove、touchend
Touch对象共8种属性：identifier、target、screenX、screenY、clientX、clientY、pageX、pageY
(1)identifier：只读，long类型，针对每一个touch事件的统一标识，常用于多指触发的事件处理。
(2)target：只读，类型，触摸点所触摸的目标。
(3)screenX：只读，long类型，触摸点位置相对于用户屏幕水平偏移量。
(4)screenY：只读，long类型，触摸点位置相对于用户屏幕垂直偏移量。
(5)clientX：只读，long类型，触摸点位置相对于可视区域的水平偏移量，该偏移量不包含滚动条的偏移量。
(6)clientY：只读，long类型，触摸点位置相对于可视区域的垂直偏移量，该偏移量不包含滚动条的偏移量。
(7)pageX：只读，long类型，触摸点位置相对于页面的水平偏移量，该偏移量包含滚动条的偏移量。
(8)pageY：只读，long类型，触摸点位置相对于页面的垂直偏移量，该偏移量包含滚动条的偏移量。
常用的属性有3种：target、pageX、pageY
TouchEvent对象的7种属性
(1)touches：只读，touchlist类型，当前被触发的touch对象列表。
(2)targetTouches：只读，touchlist类型，
(3)changedTouches：只读，touchlist类型，上次被触发的touch对象列表。这个对象列表是4种事件的touch对集合，针对不同的事件有不同的要求。
1)touchstart事件：必须是刚刚被触发的touchstart事件对象。
2)touchmove事件：必须是刚刚被触发的touchmove事件对象。
3)touchend and touchcancel事件：必须是刚刚移除屏幕的touchend and touchcancel事件对象。
(4)altKey：只读，boolean类型，如果是alt键引发的触屏事件，则返回true，否则为false
(5)metaKey：只读，boolean类型，如果是meta键（不同平台下这个名称或许不同）引发的触屏事件，则返回true，否则为false
(6)ctrlKey：只读，boolean类型，如果是ctrl键引发的触屏事件，则返回true，否则为false
(7)shiftKey：只读，boolean类型，如果是shift键引发的触屏事件，则返回true，否则为false
常用的属性有3种：touches、targetTouches、changedTouches
注意：（在代码中已加入对wp手机的兼容处理）
大WP手机，Microsoft遵循W3C的Pointer Events规范(该规范还在草案审理中)，Pointer Events针对触屏的自定义事件有7种： pointerdown、pointerenter、pointerleave、pointermove、pointerout、pointerover、pointerup，这些事件都继承于我们常用的mouse事件。
Pointer Events这里不做过多解释，分别对应鼠标事件如下表所示：
| 微软鼠标事件与触屏事件对应关系表 | |
| mousedown | pointerdown |
| mouseenter | pointerenter |
| mouseleave | pointerleave |
| mousemove | pointermove |
| mouseout | pointerout |
| mouseover | pointerover |
| mouseup | pointerup |
因此，根据上面提供的事件及相关的处理机制我们即可针对用户触屏的事件做处理，如：touchstart时保存手指在屏幕上的位置，touchend时监控手指在屏幕上的位置。当横向的滑动位置大小一定宽度时我们认为手指在触屏上是有效滑动。(例子中的幻灯片是以30px为界限)。
例如：
touchstart在屏幕横向20px，touchend在屏幕横向40px，即：横向为20px的距离，说明手指向右滑动。
touchstart在屏幕横向20px，touchend在屏幕横向10px，即：横向为-10px的距离，说明手指向左滑动。
示例代码如下：
document.getElementById("xtouchslider-wrapper").addEventListener('touchstart', touchstarthandler, false);
document.getElementById("xtouchslider-wrapper").addEventListener('touchmove', touchmovehandler, false);
document.getElementById("xtouchslider-wrapper").addEventListener('touchend', touchendhandler, false);
function touchstarthandler(event) {
x1 = event.touches[0].pageX;
}
function touchmovehandler(event) {
event.preventDefault();//禁止浏览器默认事件
}
function touchendhandler(event) {
x2 = event.changedTouches[0].pageX;
//判断滑动的距离
if ((x1 - x2) > 30)//左滑动
{
scrollleft();
}
if ((x1 - x2) < -30)//右滑动
{
scrollright();
}
}二、触屏事件处理
如：淡时淡出切换图片、左右滑动切换图片等（此处以最常见的左右滑动为示例）。
在没有css3这前，一般针对这类简单的动画都是使用setTimeOut()结合css绝对定位来处理动画过程，但触屏手机大部份浏览器都是基于webkit内核，对css3的支持很好，我们在做幻灯动画处理的时候使用css3动画+定位进行动画的处理。
css3中我们主要用到的是@keyframes 规则与transform 属性。
@keyframes 规则用于创建动画。
transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
/*item从左向右移入可视区*/
.xtouchslider-item-scroll-right-in {
z-index:;
-moz-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Firefox */
-webkit-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Safari 和 Chrome */
-o-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Opera */
animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear;
} @keyframes xtouchslider-item-scroll-right-in-animation {
0% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
} 100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
三、源码及使用
1、JS源码
$(document).ready(function () {
//根据item的数量创建icon
(function () {
var count = $(".xtouchslider-item-wrapper").children("div").length;//获取图片数量
if (count > 0) {
for (var i = 0; i < count; i++) {//添加icon项目
$(".xtouchslider-icon-wrapper").append("<div class=\"xtouchslider-icon\"></div>");
}
//首项设置为选中
$(".xtouchslider-icon").first().removeClass("xtouchslider-icon").addClass("xtouchslider-icon-on");
}
}());
//xtouchslider对象
$.xtouchslider = {
wrapper: $(".xtouchslider-wrapper"),
items: {
wrapper: $(".xtouchslider-item-wrapper"),
css: {
item: "xtouchslider-item",
itemon: "xtouchslider-item-on",
scrollleftout: "xtouchslider-item-scroll-left-out",
scrollleftin: "xtouchslider-item-scroll-left-in",
scrollrightout: "xtouchslider-item-scroll-right-out",
scrollrightin: "xtouchslider-item-scroll-right-in"
},
prev: {},
current: {},
next: {},
scroll: function (direction) {
var that = this;
function selected(item) {
item.removeClass(that.css.item).addClass(that.css.itemon);
switch (direction) {
case "left":
item.addClass(that.css.scrollleftin);
break;
case "right":
item.addClass(that.css.scrollrightin);
break;
}
};
function unselected(item) {
item.removeClass(that.css.itemon).addClass(that.css.item);
switch (direction) {
case "left":
item.addClass(that.css.scrollleftout);
break;
case "right":
item.addClass(that.css.scrollrightout);
break;
}
};
switch (direction) {
case "left":
if (this.next.length > 0) {
unselected(this.current);
selected(this.next);
}
break;
case "right":
if (this.prev.length > 0) {
unselected(this.current);
selected(this.prev);
}
break;
};
var that = this; setTimeout(function () { that.clear(); }, 500);
},
clear: function () {
this.wrapper.children().removeClass(this.css.scrollleftout).removeClass(this.css.scrollleftin).removeClass(this.css.scrollrightout).removeClass(this.css.scrollrightin);
}
},
icons: {
wrapper: $(".xtouchslider-icon-wrapper"),
css: {
icon: "xtouchslider-icon",
iconon: "xtouchslider-icon-on"
},
prev: {},
current: {},
next: {},
scroll: function (direction) {
var that = this;
function unselected(icon) {
icon.removeClass(that.css.iconon).addClass(that.css.icon);
};
function selected(icon) {
icon.removeClass(that.css.icon).addClass(that.css.iconon);
};
switch (direction) {
case "left":
if (this.next.length > 0) {
unselected(this.current);
selected(this.next);
}
break;
case "right":
if (this.prev.length > 0) {
unselected(this.current);
selected(this.prev);
}
break;
};
},
}
};
$.xtouchslider.exec = {
css: {
itemwrapper: ".xtouchslider-item-wrapper",
itemon: ".xtouchslider-item-on",
iconwrapper: ".xtouchslider-icon-wrapper",
iconon: ".xtouchslider-icon-on"
},
scrollleft: function () {
var that = this;
var currentitem = $(that.css.itemwrapper).children().filter(that.css.itemon);
$.xtouchslider.items.current = currentitem; $.xtouchslider.items.next = currentitem.next();
$.xtouchslider.items.scroll("left");
var currenticon = $(that.css.iconwrapper).children().filter(that.css.iconon);
$.xtouchslider.icons.current = currenticon; $.xtouchslider.icons.next = currenticon.next();
$.xtouchslider.icons.scroll("left");
},
scrollright: function () {
var that = this;
var currentitem = $(that.css.itemwrapper).children().filter(that.css.itemon);
$.xtouchslider.items.current = currentitem; $.xtouchslider.items.prev = currentitem.prev();
$.xtouchslider.items.scroll("right");
var currenticon = $(that.css.iconwrapper).children().filter(that.css.iconon);
$.xtouchslider.icons.current = currenticon; $.xtouchslider.icons.prev = currenticon.prev();
$.xtouchslider.icons.scroll("right");
}
};
$.xtouchslider.init = {
x1: {},
x2: {},
main: function () {
if (window.navigator.msPointerEnabled) {//winphone浏览器
$(".xtouchslider-wrapper").bind("pointerdown", this.iepointerdown);
$(".xtouchslider-wrapper").bind("pointermove", this.iepointermove);
$(".xtouchslider-wrapper").bind("pointerout", this.iepointerout);
}
else {
$(".xtouchslider-wrapper").bind("touchstart", this.othertouchstart);
$(".xtouchslider-wrapper").bind("touchmove", this.othertouchmove);
$(".xtouchslider-wrapper").bind("touchend", this.othertouchend);
}
},
iepointerdown: function (event) {
this.x1 = event.originalEvent.pageX;
},
iepointermove: function (event) {
event.originalEvent.preventDefault();
},
iepointerout: function (event) {
this.x2 = event.originalEvent.pageX;
if ((this.x1 - this.x2) > 30) {
$.xtouchslider.exec.scrollleft();
}
if ((this.x1 - this.x2) < -30) {
$.xtouchslider.exec.scrollright();
}
},
othertouchstart: function (event) {
this.x1 = event.originalEvent.touches[0].pageX;
},
othertouchmove: function (event) {
event.originalEvent.preventDefault();
},
othertouchend: function (event) {
this.x2 = event.originalEvent.changedTouches[0].pageX;
if ((this.x1 - this.x2) > 30) {
$.xtouchslider.exec.scrollleft();
}
if ((this.x1 - this.x2) < -30) {
$.xtouchslider.exec.scrollright();
}
}
};
$.xtouchslider.init.main();
});2、Css源码
.xtouchslider-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.xtouchslider-item, .xtouchslider-item-on {
width: 100%;
height: 100%;
position: absolute;
z-index:;
}
.xtouchslider-item img, .xtouchslider-item-on img {
width: 100%;
height: 100%;
}
.xtouchslider-item-on {
z-index:;
}
.xtouchslider-icon-wrapper {
position: absolute;
z-index:;
bottom: 5%;
width: 100%;
height: 5%;
text-align: center;
display: table;
}
.xtouchslider-icon, .xtouchslider-icon-on {
background: #ffffff;
width: 1.2em;
height: 1.2em;
border-radius: 1.2em;
margin-right: 1em;
opacity: 0.5;
display: inline-block;
float: none;
}
.xtouchslider-icon-wrapper div:last-child {
margin-right: 0em;
}
.xtouchslider-icon-on {
background: #ff6a00;
}
/*item由当前位置向左移出可视区*/
.xtouchslider-item-scroll-left-out {
z-index:;
-moz-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Firefox */
-webkit-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Safari 和 Chrome */
-o-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Opera */
animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear;
}
@keyframes xtouchslider-item-scroll-left-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
}
@-moz-keyframes xtouchslider-item-scroll-left-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
}
@-webkit-keyframes xtouchslider-item-scroll-left-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
}
/*item从右向左移入可视区*/
.xtouchslider-item-scroll-left-in {
z-index:;
-moz-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Firefox */
-webkit-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Safari 和 Chrome */
-o-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Opera */
animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear;
}
@keyframes xtouchslider-item-scroll-left-in-animation {
0% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
@-moz-keyframes xtouchslider-item-scroll-left-in-animation {
0% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
@-webkit-keyframes xtouchslider-item-scroll-left-in-animation {
0% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
/*item由当前位置向右移出可视区*/
.xtouchslider-item-scroll-right-out {
z-index:;
-moz-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Firefox */
-webkit-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Safari 和 Chrome */
-o-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Opera */
animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear;
}
@keyframes xtouchslider-item-scroll-right-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
}
@-moz-keyframes xtouchslider-item-scroll-right-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
}
@-webkit-keyframes xtouchslider-item-scroll-right-out-animation {
0% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
100% {
-ms-transform: translateX(100%); /* IE 9 */
-moz-transform: translateX(100%); /* Firefox */
-webkit-transform: translateX(100%); /* Safari 和 Chrome */
-o-transform: translateX(100%); /* Opera */
transform: translateX(100%);
}
}
/*item从左向右移入可视区*/
.xtouchslider-item-scroll-right-in {
z-index:;
-moz-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Firefox */
-webkit-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Safari 和 Chrome */
-o-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Opera */
animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear;
}
@keyframes xtouchslider-item-scroll-right-in-animation {
0% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
@-moz-keyframes xtouchslider-item-scroll-right-in-animation {
0% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}
@-webkit-keyframes xtouchslider-item-scroll-right-in-animation {
0% {
-ms-transform: translateX(-100%); /* IE 9 */
-moz-transform: translateX(-100%); /* Firefox */
-webkit-transform: translateX(-100%); /* Safari 和 Chrome */
-o-transform: translateX(-100%); /* Opera */
transform: translateX(-100%);
}
100% {
-ms-transform: translateX(0%); /* IE 9 */
-moz-transform: translateX(0%); /* Firefox */
-webkit-transform: translateX(0%); /* Safari 和 Chrome */
-o-transform: translateX(0%); /* Opera */
transform: translateX(0%);
}
}3、应用实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery幻灯片Demo</title>
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="no" />
<link href="Css/xtouchslider.css" rel="stylesheet" />
<script src="Script/jquery-2.1.1.js"></script>
<script src="Script/xtouchslider.js"></script>
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
} .tempstyle {
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div class="tempstyle">
<div class="xtouchslider-wrapper">
<div class="xtouchslider-item-wrapper">
<div class="xtouchslider-item-on"><img src="Image/1.png" /></div>
<div class="xtouchslider-item"><img src="Image/2.png" /></div>
<div class="xtouchslider-item"><img src="Image/3.png" /></div>
<div class="xtouchslider-item"><img src="Image/2.png" /></div>
</div>
<div class="xtouchslider-icon-wrapper">
</div>
</div>
</div>
</body>
</html>
说明：tempstyle是外层的div，无实际意义，在使用中把这个div换成项目中要放幻灯的div即可。<div class="xtouchslider-wrapper"></div>为内层。xtouchslider-wrapper的样式为宽高都为100%，因此在使用过程中只需要针对tempstyle的div进行设计宽高即可。
4，效果