移动端触摸滑动,自己写的,如果有什么不对的,希望指教
1.[文件] swipe.zip ~ 16KB 下载(363)
2.[文件] index.html ~ 2KB 下载(156)
Document*{margin: 0;padding: 0;}
.wrapper{width:100%;height: 200px;overflow: hidden;position: relative;}
.content{height:200px;}
.content>div{
float: left;
height: 200px;
}
.btn{position: absolute;bottom: 20px;width: 80%;text-align: center;}
.btn a{width: 10px;height: 10px;border-radius: 100%;display: inline-block;border: 1px solid #fff;margin:0 3px;}
.btn .active{background: #fff;}



$(function(){
var blt = (function () {
return new swipers();
})();
function swipers(){};
swipers.prototype.slider=function(tagName,propo){
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
var parent = tagName.parent();
var _len = tagName.length;
for (var i = 0; i < _len; i++) {
$("").appendTo(parent.next());
};
$("a").eq(0).addClass("active");
var imgLen = (1/_len)*100;
tagName.css("width",imgLen + "%");
parent.css("width",_len * 100+"%");
tagName.swipeLeft(function(){
blt.swipe(this,1,_len-1,propo);
})
tagName.swipeRight(function(){
blt.swipe(this,-1,0,propo);
});
}
swipers.prototype.swipe=function(key,value,length,propo){
var _len = propo.length;
var index = $(key).index();
var imgLen = (1/_len)*100;
var len = -imgLen * (index+value) + "%";
if (index == length) {
return false;
}else{
$(key).parent().css({
'-webkit-transform':'translate('+len+')',
'-moz-transform':'translate('+len+')',
'transform':'translate('+len+')',
'-webkit-transition':'500ms linear',
'-moz-transition':'500ms linear',
'transition':'500ms linear'
});
$("a").eq(index + value).addClass("active")
.siblings().removeClass('active');
}
return this;
}
var _img = $(".content>div");
blt.slider(_img,$(".content>div"));
})