如图所示：
最近开始移动项目的web开发了，查看了很多类似的插件，觉得还是过于繁琐，所以自己写了一个相对简单插件应用，需要的朋友可以随时拿走！
使用说明:
首先要在你的页面中连接JQ库,和我写的这个类（注意先后顺序，源码下面会贴出来）。
<head> <script src="libs/jquery.js"></script> <script src="libs/touch-slide.js"></script> </head>
接下来就是连接入默认的css样式(可定制自己需要的，手动修改即可)。
<style> .slide-main{ position:relative;height:137px;/*width:296px;border:1px solid red;*/border-radius:5px; margin:10px auto;overflow-x:hidden;} .slide-main .slide-box{/*width:296px;*/height:137px;position:relative;} .slide-main .slide-box .slide-item{height:137px;width:100%;/*width:296px;*/ overflow:hidden; position:absolute;left:0;top:0;} .slide-main .slide-box .current{ z-index:1;} .slide-main .slide-control{ position:absolute; z-index:2;left:10px;bottom:10px;height:10px;} .slide-main .slide-control span{border:1px solid red; margin:0 2px; display:inline-block;width:10px;height:10px; border-radius:50%;} .slide-main .slide-control span.selected{ background:orange;} </style>
当然插件源码也要链入啊
(function(){ /** *@基于JQ的移动设备滑动幻灯片效果 *@按照约定的DOM结构添加内容 *@可定制自己想要的样式 *@杨永 *@2014-04-11 *@QQ:377746756 */ function TouchSlide(touchMain,setting){ var _this_=this; //保存单个对象 this.touchMain=touchMain; //保存动画对象 this.touchSlide=$(".slide-box",touchMain); //保存帧数列表 this.slideItems=$(".slide-item",this.touchSlide); //保存帧数 this.slideItemSize=this.slideItems.size(); //保存幻灯片的偏移值 this.slideOffset={ offsetX:this.touchMain.offset().left, offsetY:this.touchMain.offset().top }; //当帧数大于1的时候 if(this.slideItemSize>1){ //计数器 this.loop=0; //保存幻灯片的宽度 this.slideW=this.touchMain.width(); //绑定事件 this.touchMain.get(0).addEventListener("touchstart",function(evt){ window.clearInterval(_this_.autoTimer); //记录触摸位置 _this_.touchStartX=_this_.getLayerOffset(evt).layerX; _this_.touchStartY=_this_.getLayerOffset(evt).layerY; //绑定文档touchmove事件 function relaseMove(evt){ _this_.touchMove.call(_this_,evt); }; document.addEventListener("touchmove",relaseMove,false); //触摸停止 function relaseEnd(evt){ document.removeEventListener("touchmove",relaseMove,false); document.removeEventListener("touchend",relaseEnd,false); _this_.touchEnd.call(_this_,evt); if(_this_.auto){ _this_.autoPlay(); }; }; document.addEventListener("touchend",relaseEnd,false); },false); /** *@这里待设置的配置参数 *@setting={ autoPlay:true, //用来控制是否自动轮播 autoTime:500, //控制自动播放的时间 callBack:fun, //每一帧切换完毕触发的回调函数 isShowBtns:‘yes/no‘ //是否显示索引按钮 } */ this.auto=setting.autoPlay||false; this.autoTime=setting.autoTime||5000; this.callBack=setting.callBack||function(){}; this.isShowBtns=setting.isShowBtns||"yes"; //启动自动播放 if(this.auto){ this.autoPlay(); }; if(this.isShowBtns=="yes"){ //创建按钮 this.createControlBtns(); //保存索引按钮 this.controlBtns=this.touchMain.find(".slide-control span"); }; }; }; TouchSlide.prototype={ //自动播放 autoPlay:function(){ var _this_=this; this.autoTimer=window.setInterval(function(){ _this_.transform(); },this.autoTime); }, transform:function(){ var _this_=this; this.loop++; if(this.loop>this.slideItemSize-1){ this.loop=0 }; this.slideItems.eq(this.loop).css("left",this.slideW); this.touchSlide.animate({left:-this.slideW},"fast",function(){ $(this).css("left",0); _this_.slideItems.css("left",0).eq(_this_.loop).addClass("current").siblings().removeClass("current"); if(this.isShowBtns=="yes"){ _this_.controlBtns.eq(_this_.loop).addClass("selected").siblings().removeClass("selected"); }; //触发回调函数 if(_this_.callBack){ _this_.callBack(_this_.slideItems.eq(_this_.loop)); }; }); }, //创建索引按钮 createControlBtns:function(){ var html="<div class=‘slide-control‘>"; this.slideItems.each(function(i,o){ if(i==0){ html+="<span class=‘selected‘></span>"; }else{ html+="<span></span>"; }; }); html+="</div>"; this.touchSlide.after(html); }, touchMove:function(evt){ var diff=this.touchStartX-this.getLayerOffset(evt).layerX; //如果是向左滑动 if(diff>=0){ if(Math.abs(diff)>30){ //阻止默认滚屏 evt.preventDefault(); }; this.setItemOffset("right"); }else{ if(Math.abs(diff)>30){ //阻止默认滚屏 evt.preventDefault(); }; this.setItemOffset("left"); }; //滑动起来 this.touchSlide.css("left",-(this.touchStartX-this.getLayerOffset(evt).layerX)); }, touchEnd:function(evt){ var _this_=this; var diff=this.touchStartX-this.getLayerOffset(evt).layerX; //当触摸水平位置大于30的时候才过度 if(Math.abs(diff)>=30){ if(diff>0){ this.loop++; if(this.loop>this.slideItemSize-1){ this.loop=0 }; this.touchSlide.animate({left:-this.slideW},"fast",function(){ $(this).css("left",0); _this_.slideItems.css({left:"auto",right:"auto"}).eq(_this_.loop).addClass("current").siblings().removeClass("current"); //设置选中样式 if(_this_.isShowBtns=="yes"){ _this_.controlBtns.eq(_this_.loop).addClass("selected").siblings().removeClass("selected"); }; //触发回调函数 if(_this_.callBack){ _this_.callBack(_this_.slideItems.eq(_this_.loop)); }; }); }else{ this.loop--; if(this.loop<0){ this.loop=this.slideItemSize-1; }; this.touchSlide.animate({left:this.slideW},"fast",function(){ $(this).css("left",0); _this_.slideItems.css({left:"auto",right:"auto"}).eq(_this_.loop).addClass("current").siblings().removeClass("current"); //设置选中样式 if(_this_.isShowBtns=="yes"){ _this_.controlBtns.eq(_this_.loop).addClass("selected").siblings().removeClass("selected"); }; //触发回调函数 if(_this_.callBack){ _this_.callBack(_this_.slideItems.eq(_this_.loop)); }; }); }; }else{ this.touchSlide.animate({left:0},"fast",function(){ _this_.slideItems.css({left:"auto",right:"auto"}).eq(_this_.loop).addClass("current").siblings().removeClass("current"); }); }; }, //设置对应帧左右偏移 setItemOffset:function(dir){ //初始化掉除了当前帧的偏移 this.slideItems.each(function(i,o){ if(!$(this).hasClass("current")){ $(this).css({ left:"auto", right:"auto" }); }; }); //如果dir=="right" if(dir=="right"){ if(this.loop==this.slideItemSize-1){ this.slideItems.eq(0).css("left",this.slideW); }else{ this.slideItems.eq(this.loop+1).css("left",this.slideW); }; }else if(dir=="left"){ if(this.loop==0){ this.slideItems.eq(this.slideItemSize-1).css("left",-this.slideW); }else{ this.slideItems.eq(this.loop-1).css("left",-this.slideW); }; }; }, //获取layerX、layerY getLayerOffset:function(evt){ return { layerX:evt.changedTouches[0].pageX-this.slideOffset.offsetX, layerY:evt.changedTouches[0].pageY-this.slideOffset.offsetY }; } }; window.TouchSlide=TouchSlide; })();
插件配置：
以上必要步骤完成后，就要创建幻灯片。
var touchSlide=new TouchSlide($("#J_TouchSlide"),{ isShowBtns:"yes", //是否显示控制按钮 autoPlay:true, //是否自动播放 autoTime:7000, //自动播放的时间 callBack:function(elem){ //每一帧切换完毕后触发该函数,elem参数则是当前切换的帧(即.slide-item) console.log(elem.index()) } });
目前插件提供一个必要的参数->$("#J_TouchSlide"),这个就是传递DOM结构的滑动区域;
第二个参数->{autoPlay:false},是一个JSON的对象，对应的配置详见创建DEMO;
大家使用的时候有问题，欢迎加我Q:377746756。共同为推动web前端贡献绵薄之力~~~~~~~~~~~~