移动端判断浏览器内核/参考写的轮播

原创
2015/11/16 15:13
阅读数 564
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)
          })



展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部