首页 > 代码库 > 手机版图片轮播插件
手机版图片轮播插件
(function($) { $.extend($.fn, { slider: function(obj) { this.each(function() { var $self = $(this); var dom = { "wrap": $self.find(".slider-list"), "item": $self.find(".slider-item"), "firstItem": $self.find(".slider-item").first(), "lastItem": $self.find(".slider-item").last(), "pagelist": null, "pageItem": null, }; var settings = { "len": dom.item.length, "width": dom.wrap.width(), "startX": 0, "startY": 0, "index": 1, "distance": 0, "timer": null, "autoScroll": obj ? (obj.autoScroll ? true : false) : true, "infinite": true }; var funs = { init: function() { if (settings.len > 1) { funs.initUI(); funs.bindEvent(); if (settings.autoScroll) { settings.timer = setInterval(funs.autoAnimate, 3000); } } }, initUI: function() { var cloneFisrt = dom.firstItem.clone(); var cloneLast = dom.lastItem.clone(); dom.wrap.append(cloneFisrt); cloneLast.insertBefore(dom.firstItem); funs.creatPage(); dom.item = $self.find(".slider-item"); settings.count = dom.item.length; settings.distance = settings.width / 3; dom.wrap.css("-webkit-transform", "translate3d(" + -settings.width + "px,0,0)"); }, creatPage: function() { var pagelist = ‘<div class="slider-page"><ul>‘; for (var i = 0; i < settings.len; i++) { if (i == 0) { pagelist += ‘<li class="active"></li>‘; } else { pagelist += ‘<li></li>‘; } } pagelist += ‘</ul></div>‘; $self.append(pagelist); dom.pagelist = $self.find(".slider-page"); dom.pageItem = dom.pagelist.find("li"); }, bindEvent: function() { $self.off().on({ "touchstart": function(e) { e.stopPropagation(); clearInterval(settings.timer); settings.startX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX; settings.startY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY; }, "touchmove": function(e) { e.stopPropagation(); e.preventDefault(); var curX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX; var curY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY; var moveX = curX - settings.startX; var moveY = curY - settings.startY; //避免禁用了下拉事件 if (Math.abs(moveY) > Math.abs(moveX)) { window.event.returnValue = http://www.mamicode.com/true;"-webkit-transform", "translate3d(" + x + "px,0,0)"); }, "touchend": function(e) { e.stopPropagation(); var curX = e.changedTouches ? e.changedTouches[0].pageX : e.originalEvent.changedTouches[0].pageX; var moveX = curX - settings.startX; if (Math.abs(moveX) >= settings.distance) { settings.index = settings.index - Math.abs(moveX) / moveX; //判断是向左还是向右 } if (settings.index >= settings.count - 1) { settings.index = settings.count - 1; } if (settings.index <= 0) { settings.index = 0; } funs.animate(); if (settings.autoScroll) { settings.timer = setInterval(funs.autoAnimate, 3000); } }, "touchcancel": function(e) { dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, "webkitTransitionEnd": function(e) { e.stopPropagation(); e.preventDefault(); dom.wrap.removeClass("transitionable"); if (settings.index <= 0) { settings.index = settings.count - 2; } if (settings.index >= settings.count - 1) { settings.index = 1; } var itemIndex = settings.infinite ? settings.index - 1 : settings.index; dom.pageItem.removeClass("active"); dom.pageItem.eq("" + itemIndex + "").addClass("active"); dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); } }); $(window).on({ "resize": function() { funs.adjustPos(); }, "orientationchange": function() { funs.adjustPos(); } }) }, adjustPos: function() { settings.width = dom.wrap.width(); settings.distance = settings.width / 3; dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, animate: function() { dom.wrap.addClass("transitionable"); dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, autoAnimate: function() { if (settings.width > 0) { settings.index++; funs.animate(); } } }; funs.init(); }); return this; } });})(window.jQuery);
手机版图片轮播插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。