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) })