PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
注:PC端JQ版本2.0或以上会报错
页面包含 jquery.touchSlider.js,代码:
/** * @name jQuery.touchSlider * @version 201209_2 * @since 201106 * @param Object settings 환경변수 오브젝트 * roll - 순환 (default true) * flexible - 유동 레이아웃 (default false) * view - 다중 컬럼 (default 1) * speed - 애니메이션 속도 (default 75) * range - 넘김 판정 범위 (default 0.15) * page - 초기 페이지 (default 1) * transition - CSS3 transition 사용 (default false) * btn_prev - prev 버튼 (jQuery Object, default null) * btn_next - next 버튼 (jQuery Object, default null) * paging - page 버튼 (jQuery Object, default null) * initComplete - 초기화 콜백 * counter - 슬라이드 콜백, 카운터 * * @example $("#target").touchSlider({ flexible : true }); */ (function ($) { $.fn.touchSlider = function (settings) { settings.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); settings = jQuery.extend({ roll : true, flexible : false, btn_prev : null, btn_next : null, paging : null, speed : 75, view : 1, range : 0.15, page : 1, transition : false, initComplete : null, counter : null, multi : false }, settings); var opts = []; opts = $.extend({}, $.fn.touchSlider.defaults, settings); return this.each(function () { $.fn.extend(this, touchSlider); var _this = this; this.opts = opts; this._view = this.opts.view; this._speed = this.opts.speed; this._tg = $(this); this._list = this._tg.children().children(); this._width = parseInt(this._tg.css("width")); this._item_w = parseInt(this._list.css("width")); this._len = this._list.length; this._range = this.opts.range * this._width; this._pos = []; this._start = []; this._startX = 0; this._startY = 0; this._left = 0; this._top = 0; this._drag = false; this._scroll = false; this._btn_prev; this._btn_next; this.init(); $(this) .bind("touchstart", this.touchstart) .bind("touchmove", this.touchmove) .bind("touchend", this.touchend) .bind("dragstart", this.touchstart) .bind("drag", this.touchmove) .bind("dragend", this.touchend) $(window).bind("orientationchange resize", function () { _this.resize(_this); }); }); }; var touchSlider = { init : function () { var _this = this; // $(this).children().css({ // "width":this._width + "px", // "overflow":"visible" // }); if(this.opts.flexible) this._item_w = this._width / this._view; if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view; var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0; for(var i=0; i<this._len; ++i) { this._pos[i] = this._item_w * i - page_gap; this._start[i] = this._pos[i]; this._list.eq(i).css({ "float" : "none", "display" : "block", "position" : "absolute", "top" : "0", "left" : this._pos[i] + "px", "width" : this._item_w + "px" }); if(this.opts.supportsCssTransitions && this.opts.transition) { this._list.eq(i).css({ "-moz-transition" : "0ms", "-moz-transform" : "", "-ms-transition" : "0ms", "-ms-transform" : "", "-webkit-transition" : "0ms", "-webkit-transform" : "", "transition" : "0ms", "transform" : "" }); } } if(this.opts.btn_prev && this.opts.btn_next) { this.opts.btn_prev.bind("click", function() { _this.animate(1, true); return false; }) this.opts.btn_next.bind("click", function() { _this.animate(-1, true); return false; }); } if(this.opts.paging) { $(this._list).each(function (i, el) { //var btn_page = _this.opts.paging.eq(0).clone(); var btn_page = _this.opts.paging.eq(i); //_this.opts.paging.before(btn_page); btn_page.bind("click", function(e) { _this.go_page(i, e); return false; }); }); //this.opts.paging.remove(); } this.counter(); this.initComplete(); }, initComplete : function () { if(typeof(this.opts.initComplete) == "function") { this.opts.initComplete(this); } }, resize : function (e) { if(e.opts.flexible) { var tmp_w = e._item_w; e._width = parseInt(e._tg.css("width")); e._item_w = e._width / e._view; e._range = e.opts.range * e._width; for(var i=0; i<e._len; ++i) { e._pos[i] = e._pos[i] / tmp_w * e._item_w; e._start[i] = e._start[i] / tmp_w * e._item_w; e._list.eq(i).css({ "left" : e._pos[i] + "px", "width" : e._item_w + "px" }); if(this.opts.supportsCssTransitions && this.opts.transition) { e._list.eq(i).css({ "-moz-transition" : "0ms", "-moz-transform" : "", "-ms-transition" : "0ms", "-ms-transform" : "", "-webkit-transition" : "0ms", "-webkit-transform" : "", "transition" : "0ms", "transform" : "" }); } } } this.counter(); }, touchstart : function (e) { if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") { this._startX = e.pageX || e.originalEvent.touches[0].pageX; this._startY = e.pageY || e.originalEvent.touches[0].pageY; this._scroll = false; this._start = []; for(var i=0; i<this._len; ++i) { this._start[i] = this._pos[i]; } } }, touchmove : function (e) { if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") { this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX; this._top = (e.pageY || e.originalEvent.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._scroll) { this._left = 0; this._drag = false; this._scroll = true; } else { e.preventDefault(); this._drag = true; this._scroll = false; this.position(e); } for(var i=0; i<this._len; ++i) { var tmp = this._start[i] + this._left; if(this.opts.supportsCssTransitions && this.opts.transition) { var trans = "translate3d(" + tmp + "px,0,0)"; this._list.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._list.eq(i).css("left", tmp + "px"); } this._pos[i] = tmp; } } }, touchend : function (e) { if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") { if(this._scroll) { this._drag = false; this._scroll = false; return false; } this.animate(this.direction()); this._drag = false; this._scroll = false; } }, position : function (d) { var gap = this._view * this._item_w; 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.opts.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(this.opts.multi) { if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)) { for(var i=0; i<this._view; ++i, ++p_min, ++p_max) { this._start[p_max] = this._start[p_min] - gap; this._list.eq(p_max).css("left", this._start[p_max] + "px"); } } else if((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)) { for(var i=0; i<this._view; ++i, ++p_min, ++p_max) { this._start[p_min] = this._start[p_max] + gap; this._list.eq(p_min).css("left", this._start[p_min] + "px"); } } } else { 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._list.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._list.eq(p_min).css("left", this._start[p_min] + "px"); } } } } else { if(this.limit_chk()) this._left = this._left / 2; } }, animate : function (d, btn_click) { if(this._drag || !this._scroll || btn_click) { var _this = this; var speed = this._speed; if(btn_click) this.position(d); var gap = d * (this._item_w * this._view); if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0; this._list.each(function (i, el) { _this._pos[i] = _this._start[i] + gap; if(_this.opts.supportsCssTransitions && _this.opts.transition) { 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(); } }, direction : function () { var r = 0; if(this._left < -(this._range)) r = -1; else if(this._left > this._range) r = 1; if(!this._drag || this._scroll) r = 0; return r; }, limit_chk : function () { var last_p = parseInt((this._len - 1) / this._view) * this._view; return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) ); }, go_page : function (i, e) { var crt = ($.inArray(0, this._pos) / this._view) + 1; var cal = crt - (i + 1); while(cal != 0) { if(cal < 0) { this.animate(-1, true); cal++; } else if(cal > 0) { this.animate(1, true); cal--; } } }, counter : function () { if(typeof(this.opts.counter) == "function") { var param = { total : Math.ceil(this._len / this._view), current : ($.inArray(0, this._pos) / this._view) + 1 }; this.opts.counter(param); } } }; })(jQuery);
页面包含 jquery.event.drag-1.5.min.js ,代码:
/* jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com) Liscensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt */ (function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
CSS设置部分
.banner{ width:100%; height:20rem; background-color:#eee; position:relative;} .banner.img_show{ width:94%; height:15.75rem; margin:0 auto;} .banner.img_show2{ width:94%; height:10.625rem; margin:0 auto;} /**/ .main_image{ height:100%; overflow:hidden; position:relative; -webkit-box-shadow:-.3rem .3rem 5px rgba(0,0,0,.5); box-shadow:-.3rem .3rem 5px rgba(0,0,0,.5); } .main_image ul , .main_image li{ width:100%; height:100%;} .main_image li img{ width:100%; height:100%;} .flicking_con{ width:100%; height:25px; text-align:center; position:absolute; left:0; bottom:0; display:;} .flicking_con a{ display:inline-block; width:10px; height:10px; margin:0 5px; font-size:0; background-color:#fff; border-radius:50%;} .flicking_con a.on{ background-color:#86080A;} .btn_prev,.btn_next{ display:block; width:0; height:0; -webkit-transform-origin:center center; transform-origin:center center; position:absolute; top:50%; margin-top:-1.25rem; display:none;} .btn_prev{ left:0;} .btn_next{ right:0; -webkit-transform:scaleX(-1); transform:scaleX(-1);}
HTML:代码部分
<div class="banner img_show"> <div class="main_image" data-auto="1"><!--data-auto 是否自动播放--> <ul> <li><img src="public/1.jpg" /></li> <li><img src="public/2.jpg" /></li> <li><img src="public/3.jpg" /></li> <li><img src="public/4.jpg" /></li> </ul> <a href="javascript:;" class="btn_prev"></a> <a href="javascript:;" class="btn_next"></a> </div> <div class="flicking_con"> <a href="javascript:;" class="on">1</a> <a href="javascript:;" class="">2</a> <a href="javascript:;" class="">3</a> <a href="javascript:;" class="">4</a> </div> </div>
JS设置切换,下面 each 方法,可设置一个页面中多个轮播处,不用多次针对每个轮播的盒子进行配置
//KV图切换 $(".main_image").each(function(index, element) { var $ele = $(element); var auto_roll = $ele.attr('data-auto'); if($ele.find('li').length > 1){ var $dragBln = false; $ele.touchSlider({ flexible : true, speed : 200, btn_prev : $ele.find('.btn_prev'), btn_next : $ele.find('.btn_next'), paging : $ele.siblings('.flicking_con').find('a'), counter : function (e){ $ele.siblings('.flicking_con').find('a').removeClass("on").eq(e.current-1).addClass("on"); } }); $ele.bind("mousedown", function() { $dragBln = false; }); $ele.bind("dragstart", function() { $dragBln = true; }); $ele.find('a').click(function(){ if($dragBln) { return false; } }); if(auto_roll == '1'){ timer = setInterval(function(){ $ele.find('.btn_next').click(); }, 3000); $ele.bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $ele.find('.btn_next').click(); }, 3000); }); } }else{ $ele.siblings('.flicking_con').hide(); } });