var browser={
versions:function() {
var u=navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}参考着自己写的轮播，记录一下
//轮播
function touchSlider(data){
this.speed = data.speed || 200;
this.wall = data.wall;
this.view = this.wall.find(':first').children();
this.wall_width = this.wall.width();
this.view_width = this.view.width();
this._len = this.view.length;
this._pos = [];
this._start = [];
this._startX = null;
this._startY = null;
this._left =0;
this._top = 0;
this.auto = data.auto;
this._view =1;
this.roll = true;
this.multi = false;
this._drag = false; //是否在拖拽滚动
this._range = this.wall_width * 0.15; //移动距离超多这个才能翻转下一页
this.counters = data.counter || "";
this.autoEvent = null;
}
touchSlider.prototype.init = function(){
var Y = this;
Y.supportsCssTransitions= (function (style) {
var prefixes = ['Webkit','Moz','Ms'];
for(var i=0, l=prefixes.length; i < l; i++ ) {
if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
return true;
}
}
return false;
})(document.createElement('div').style);
Y.wall.children().css({
"width":Y.wall_width + "px",
"overflow":"visible"
});
for (var i = 0; i < Y._len; i++) {
Y._pos[i] = Y.view_width * i;
//Y._pos[i] = Y.wall_width * i;
Y._start[i] = Y._pos[i];
Y.view.eq(i).css({
"float" : "none",
"display" : "block",
"position" : "absolute",
"left" : this._pos[i] + "px",
"width" : Y.view_width + "px"
//"width" : Y.wall_width + "px"
});
if (Y.supportsCssTransitions) {
Y.view.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
};
};
if (Y.auto == true) {
Y.autoEvent = setInterval(function(){Y.animate(-1,true)}, 3000)
};
Y.wall.off("touchstart").on("touchstart", function(event){
if (Y.autoEvent) {clearInterval(Y.autoEvent)};
Y.touchstart(event)
})
Y.wall.off("touchend").on("touchend", function(event){
Y.touchend(event)
})
Y.wall.off("touchmove").on("touchmove", function(event){
Y.touchmove(event)
})
}
touchSlider.prototype.touchstart =function(event){
this._startX = event.touches[0].pageX ;
this._startY = event.touches[0].pageY ;
this._start = [];
this._drag = false;
this.vScroll = false;
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
}
touchSlider.prototype.touchmove = function(event){
this._left = (event.touches[0].pageX) - this._startX;
this._top = (event.touches[0].pageY ) - this._startY;
var w = this._left < 0 ? this._left * -1 : this._left;
var h = this._top < 0 ? this._top * -1 : this._top;
if ((w < h && !this._drag) || this.vScroll) {
this._left = 0;
this._drag = false;
this.vScroll = true;
return;
}else if(!this.vScroll){
event.preventDefault();
this._drag = true;
this.vScroll = false;
this.position(event);
}
for(var i=0; i<this._len; ++i) {
var tmp = this._start[i] + this._left;
if (this.supportsCssTransitions) {
var trans = "translate3d(" + tmp + "px,0,0)";
this.view.eq(i).css({
"left" : "",
"-moz-transition" : "0ms",
"-moz-transform" : trans,
"-ms-transition" : "0ms",
"-ms-transform" : trans,
"-webkit-transition" : "0ms",
"-webkit-transform" : trans,
"transition" : "0ms",
"transform" : trans
});
}else {
this.view.eq(i).css("left", tmp + "px");
}
this._pos[i] = tmp;
}
}
touchSlider.prototype.touchend = function(event){
if(this.vScroll){
return;
}
var Y = this;
this.animate(this.direction());
this._drag = false;
this._scroll = false;
if (Y.auto == true) {
this.autoEvent = setInterval(function(){Y.animate(-1,true)}, 3000)
};
}
touchSlider.prototype.direction = function(){
var r = 0;
if(this._left < -(this._range)) r = -1;
else if(this._left > this._range) r = 1;
if(!this._drag) r = 0;
return r;
}
touchSlider.prototype.animate = function(d, btn_click){
if(this._drag || btn_click) {
var _this = this;
var speed = this.speed;
if(btn_click) this.position(d);
var gap = d * (this.view_width * this._view);
if(this._left == 0) gap = 0;
this.view.each(function (i, el) {
_this._pos[i] = _this._start[i] + gap;
var lens = (parseInt(_this.view_width))*(_this._len-1);
if (_this._pos[i] > lens) {_this._pos[i]=0};
if(_this.supportsCssTransitions){
var transition = speed + "ms";
var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
if(btn_click) transition = "0ms";
$(this).css({
"left" : "",
"-moz-transition" : transition,
"-moz-transform" : transform,
"-ms-transition" : transition,
"-ms-transform" : transform,
"-webkit-transition" : transition,
"-webkit-transform" : transform,
"transition" : transition,
"transform" : transform
});
}else{
$(this).stop();
$(this).animate({"left": _this._pos[i] + "px"}, speed);
}
});
this.counter();
}
}
touchSlider.prototype.position = function (d) {
var gap = this._view * this.view_width;
if(d == -1 || d == 1) {
this._startX = 0;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
this._left = d * gap;
} else {
if(this._left > gap) this._left = gap;
if(this._left < - gap) this._left = - gap;
}
if(this.roll) {
var tmp_pos = [];
for(var i=0; i<this._len; ++i) {
tmp_pos[i] = this._pos[i];
}
tmp_pos.sort(function(a,b){return a-b;});
var max_chk = tmp_pos[this._len-this._view];
var p_min = $.inArray(tmp_pos[0], this._pos);
var p_max = $.inArray(max_chk, this._pos);
if(this._view <= 1) max_chk = this._len - 1;
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this.view.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this.view.eq(p_min).css("left", this._start[p_min] + "px");
}
}
}
}
touchSlider.prototype.counter = function(e){
if (typeof(this.counter) == "function") {
var param = {
total : Math.ceil(this._len / this._view),
current : ($.inArray(0, this._pos) / this._view) + 1
}
if (this.counters != "") {this.counters(param);};
};
}
用的时候：
var data = {};
data.speed = 200;
data.wall = $("#showImage");
data.auto = true;
data.counter = function(e){
$("#showNo li").removeClass("cur").eq(e.current-1).addClass("cur");
}
var matchData ={};
matchData.wall = $("#logonav");
matchData.speed = 200;
matchData.auto = false;
matchData.counter = "";
var kjData = {};
kjData.wall = $("#kjtzWap");
kjData.speed = 200;
kjData.auto = false;
kjData.counter = "";
var ssqN = {id:$("#ssqEnd"), time:$("#ssqEnd").data("end")};
var dltN = {id:$("#dltEnd"), time:$("#dltEnd").data("end")}
if (touchSlider) {
var slider = new touchSlider(data);
slider.init()
var newslider = new touchSlider(matchData);
newslider.init()
var kjtzWapSlider = new touchSlider(kjData);
kjtzWapSlider.init()
$(".leftA").off("tap").on("tap",function(){
newslider.animate(1,true)
})
$(".rightA").off("tap").on("tap",function(){
newslider.animate(-1,true)
})
