<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title></title>
<style>
html{overflow-x:hidden;min-height:100%;width:100%;}
body{margin:0;overflow-x:hidden;min-height:100%;}
.slipping-area{position:relative;}
.slipping-imgbox{overflow-x:hidden;width:9999px;}
.slipping-imgbox>img{height:300px;float:left;}
/*点样式*/
.slipping-dot{position:absolute;bottom:6px;left: 50%;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);-moz-transform: translate(-50%,0);-ms-transform: translate(-50%,0);-o-transform: translate(-50%,0);}
.slipping-dot>em>i{display:inline-block;width:8px;height:8px;background-clip:padding-box;border-radius:50%;background-color:transparent;position:absolute;top: 50%;left: 50%;margin:-4px 0 0 -4px;}
.slipping-dot>em.active>i{background-color:#4C62D6;}
.slipping-dot>em{display:inline-block;width:14px;height:14px;background-clip:padding-box;border-radius:50%;background-color:rgba(0,0,0,0.2);position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2px;}
</style>
</head>
<body>
<div class="slipping-area">
<div class="slipping-imgbox">
<img src="pb1.jpg" alt="">
<img src="pb2.jpg" alt="">
<img src="pb3.jpg" alt="">
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script src="slip.js"></script>
<script>
/**
* [slip description]
* 调用方法 slip('.slipping-area')||slip(1000)||slip('.slipping-area',1000)
* @param {[jq选择器]} selector [jq选择器,默认'.slipping-area']
* @param {[int]} time [轮播时间，默认0,0则代表不开启自动轮播]
*/
slip.iniT('.slipping-area',2000);
</script>
</html>
slip.js代码
/**
* [slipping description]
* 调用方法 slipping('.slipping-area')||slipping(1000)||slipping('.slipping-area',1000)||slipping('.slipping-area',1000)
* @param {[jq选择器]} selector [jq选择器,默认'.slipping-area']
* @param {[int]} time [轮播时间，默认0,0则代表不开启自动轮播]
*/
(function(){
var slipping=function(){
}
slipping.prototype.iniT=function(_selector,time)
{
if(arguments.length==1){
if(typeof(arguments[0]=='number')){
time=arguments[0];
selector='.slipping-area';
}else{
time=0;
selector=arguments[0];
}
}else{
time=time||0;
selector='.slipping-area'||0;
}
var img_arr=$(_selector).find('img');
this.autotime=time;
this.elem=img_arr.parent();
this.img_len=img_arr.length; //得到所有图片数量
var zhe_first=img_arr.eq(0).clone(true); //复制第一张图片
var zhe_last=img_arr.eq(this.img_len-1).clone(true); //复制最后一张图片
var dot="<div class='slipping-dot'><em><i></i></em><em><i></i></em><em><i></i></em></div>";
$(_selector).append(dot);
this.elem.append(zhe_first); //将复制的第一张图片插入图片盒子最后面
this.elem.prepend(zhe_last); //将复制的最后一张图片插入图片盒子最前面
this.img_len+=2; //所有图片数量+2
this.index= 1; //开始图片位置
this.coordinate=new Object(); //定义存储坐标对象
this._iniT();
this.addListen();
this.chageDot();
if(this.autotime!=0){
this.changeAuto(this.autotime);
}
}
slipping.prototype._iniT=function()
{
this.win_wid=$(window).width()||$(document.body).width(); //得到屏幕宽度
this.div_width=this.win_wid*this.img_len; //得到图片盒子宽度
this.elem.css('width',this.div_width); //设置图片盒子宽度
this.elem.find('img').css('width',this.win_wid); //设置图片宽度为屏幕宽度
var mx=-this.index*this.win_wid;
this.tanSlate(mx,0);
_this=this;
$(window).off("orientationchange resize");
$(window).on("orientationchange resize", function(){ //屏幕宽度改变，重新配置
_this._iniT();
});
this.elem.find('img').on('dragstart',function(){event.preventDefault();}) //禁止拖放事件
}
slipping.prototype.changeAuto=function(time)
{
clearInterval(this.intervarauto);
var _this=this;
this.intervarauto=setInterval(function(){
var gochage=function(){
_this.index=_this.index+1>_this.img_len-1?_this.img_len-2:_this.index+1;
var mx=-_this.index*_this.win_wid;
_this.tanSlate(mx,0.3);
_this.chageDot();
}
if(_this.index==1){
var mx=-_this.index*_this.win_wid;
_this.tanSlate(mx,0);
_this.chageDot();
var timeout=setTimeout(function(){
gochage();
},10);
}else{
gochage();
}
if(_this.index==_this.img_len-1){
_this.index=1;
var mx=-_this.index*_this.win_wid;
_this.timeout=setTimeout(function(){
_this.tanSlate(mx,0);
_this.chageDot();
},330);
}
},time);
}
slipping.prototype.tStart=function() //start执行事件
{
if(this.autotime!=0){
clearInterval(this.intervarauto);
clearTimeout(this.timeout);
}
this.time=0;
var _this=this;
this.interval=setInterval(function(){
_this.time+=10;
},10);
this.coordinate.start=getClient();
};
slipping.prototype.tMove=function() //move执行事件
{
var coord=this.coordinate;
try{
coord.move=getClient();
var mx=coord.move.x-coord.start.x;
if(this.index==0){ //右滑
if(mx>2){
this.index=this.img_len-2;
return
}else{
this.index=0;
}
}
if(this.index==this.img_len-1){
if(mx<-2){ //左滑
this.index=1;
return
}else{
this.index=this.img_len-1;
}
}
mx-=this.index*this.win_wid;
}
catch(e){''}
this.tanSlate(mx,0);
};
slipping.prototype.tEnd=function() //end执行事件
{
clearInterval(this.interval);
var coord=this.coordinate;
try{
var mx=coord.move.x-coord.start.x;
if(mx>0&&this.time<=200&&mx>5||mx>=this.win_wid/2){ //右
this.index=this.index-1<0?this.index=0:this.index-1;
}else if(mx<0&&this.time<=200&&mx<-5||-mx>=this.win_wid/2){ //左
this.index=this.index+1>this.img_len-1?this.img_len-2:this.index+1;
}else{
this.index=this.index;
}
mx=-this.index*this.win_wid;
}
catch(e){''}
this.tanSlate(mx,0.3);
this.chageDot();
if(this.autotime!=0){
if(this.index==this.img_len-1){
this.index=1;
}
this.changeAuto(this.autotime);
}
this.coordinate=new Object();
};
slipping.prototype.chageDot=function()
{
var index=this.index>=this.img_len-1?0:this.index-1;
this.elem.next().find('em').removeClass('active');
this.elem.next().find('em').eq(index).addClass('active');
}
slipping.prototype.addListen=function()
{
var _this=this;
var is_mouseup=false;
this.elem.on('touchstart touchmove touchend mousedown mousemove mouseup mouseout',function(e){
if((e.type=='touchstart'&&e.originalEvent.touches.length <= 1)||e.type=='mousedown')
{
is_mouseup=true;
_this.tStart();
}
else if((e.type=='touchmove'&&e.originalEvent.touches.length <= 1)||(is_mouseup&&e.type=='mousemove'))
{
_this.tMove();
}
else if((e.type=='touchend'&&e.originalEvent.touches.length <= 1)||e.type=='mouseup')
{
_this.tEnd();
is_mouseup=false;
}else if(e.type=='mouseout'){
_this.tEnd();
}
});
}
/**
* [tanSlate description]
* @param {string} x [move-number]
* @param {int} t [transition-time]
*/
slipping.prototype.tanSlate = function(x,t)
{
var tran_3d='translate3d(' + x + 'px,'+ '0px,0px)';
var tran_2d='translate(' + x + 'px,'+ '0px)';
this.elem.css({
'-webkit-transform': tran_3d,
'-o-transform': tran_2d,
'-ms-transform': tran_2d,
'-moz-transform': tran_2d,
'transform': tran_3d,
'-moz-transition': '-moz-transform '+t+'s ease-out',
'-webkit-transition': '-webkit-transform '+t+'s ease-out',
'-o-transition': '-o-transform '+t+'s ease-out',
'-ms-transition': '-ms-transform '+t+'s ease-out',
'transition': 'transform '+t+'s ease-out',
});
}
/**
* [getClient 得到坐标pageX,pageY]
* @return {[object]} [pageX,pageY]
*/
var getClient = function()
{
var x=event.pageX||event.targetTouches[0].pageX;
var y=event.pageY||event.targetTouches[0].pageY;
return {
"x": x,
"y": y,
};
};
return slip=new slipping();
}())转载自原文链接, 如需删除请联系管理员。
原文链接：基于jq的图片轮播插件，滑动切图，兼容移动，PC端，转载请注明来源！