首页 > 代码库 > touchSlider插件案例
touchSlider插件案例
<!doctype html><html lang="en"><head> <title>jQuery手机图片触屏滑动轮播效果代码</title></head><style type="text/css"> *{ margin: 0;padding: 0; list-style: none; } .main_visual{ height:500px; border-top:1px solid #d7d7d7; overflow:hidden; position:relative; } .main_image{ height:100%; overflow:hidden; position:relative; } .main_image ul{ width:9999px; height:100%; overflow:hidden; position:absolute; top:0; left:0; } .main_image li{ float:left; width:100%; height:100%; } .main_image li img{ display:block; width:100%; height:100%; } div.flicking_con{ position:absolute; top:460px; left:50%; z-index:999; width:300px; height:21px; margin:0 0 0 -50px; } div.flicking_con a{ float:left; width:21px; height:21px; background:url(‘./images/btn_main_img.png‘) 0 0 no-repeat; display:block; text-indent:-1000px; } div.flicking_con a.on{ background-position:0 -21px; } #btn_prev,#btn_next{ z-index:11111; position:absolute; display:block; width:73px; height:74px; top:50%; margin-top:-37px; display:none; } #btn_prev{ background:url(./images/hover_left.png) no-repeat left top; left:100px; } #btn_next{ background:url(./images/hover_right.png) no-repeat right top; right:100px; }</style><body> <div class="main_visual"> <div class="flicking_con"> <a href="http://www.mamicode.com/#">1</a> <a href="http://www.mamicode.com/#">2</a> <a href="http://www.mamicode.com/#">3</a> <a href="http://www.mamicode.com/#">4</a> <a href="http://www.mamicode.com/#">5</a> </div> <div class="main_image"> <ul> <li><img src="http://www.mamicode.com/1.jpg"/></li> <li><img src="http://www.mamicode.com/2.jpg"/></li> <li><img src="http://www.mamicode.com/3.jpg"/></li> <li><img src="http://www.mamicode.com/4.jpg"/></li> <li><img src="http://www.mamicode.com/5.jpg"/></li> </ul> <a href="" id="btn_prev"></a> <a href="" id="btn_next"></a> </div> </div><script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/jquery.event.drag-1.5.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/jquery.touchSlider.js"></script><script type="text/javascript"> $(document).ready(function(){ //左右箭头显示与隐藏 $(".main_visual").hover(function(){ $("#btn_prev,#btn_next").fadeIn() },function(){ $("#btn_prev,#btn_next").fadeOut() }); $dragBln = false; $(".main_image").touchSlider({ flexible : true,//调用 speed : 200,//播放速度 btn_prev : $("#btn_prev"),//左右箭头 btn_next : $("#btn_next"), paging : $(".flicking_con a"),//页面相对应圆圈 counter : function (e){ $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on"); } }); $(".main_image").bind("mousedown", function() { $dragBln = false; }); $(".main_image").bind("dragstart", function() { $dragBln = true; }); $(".main_image a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 1000); $(".main_visual").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ $("#btn_next").click(); },1000); }); $(".main_image").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 1000); }); });</script></script></body></html>
/** * @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);
touchSlider插件案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。