PC端、移动端都可以用的图片轮播（左右滑动切换）插件及使用
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 gap) this._left = gap;
if(this._left < - gap) this._left = - gap;
}
if(this.opts.roll) {
var tmp_pos = [];
for(var i=0; i= 0) || (this._drag && tmp_pos[0] >= 100)) {
for(var i=0; i= 0) || (this._drag && tmp_pos[0] > 0)) {
for(var i=0; i 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)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:代码部分
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();
}
});