<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="js/jquery-1.8.1.min.js"></script>
<title>Document</title>
<style>
*{ margin:0px; padding:0px; }
body,html{ width:100%; height:50%; }
div#rect{ width:100%; height:50%;}
#scrollimg{
position: relative;
width: 200px;
height: 110px;
margin: 0 auto;
overflow: hidden;
}
#scrollimg ul{
position: absolute;
top: 0;
left: 0;
width: 800px;
}
#scrollimg ul li{
float: left;
width: 200px;
height: 110px;
list-style: none;
}
#scrollimg ul li img{
display: block;
width: 200px;
height: 110px;
}
#scrollimg ul li:nth-of-type(1) img{
background: #fbb03b;
}
#scrollimg ul li:nth-of-type(2) img{
background: #fc5252;
}
#scrollimg ul li:nth-of-type(3) img{
background: #b266f2;
}
#scrollimg ul li:nth-of-type(4) img{
background: #d1c0a5;
}
#scrollimg ol{
position: absolute;
bottom: 10px;
right: 10px;
list-style: none;
}
#scrollimg ol li{
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
}
#scrollimg ol .active{
background: #E4393C;
}
</style>
</head>
<body>
<div id="rect">
<div id="dire"></div>
</div>
<div id="scrollimg">
<ul>
<li><a href="javascript:;"><img src="" alt=""></a></li>
<li><a href="javascript:;"><img src="" alt=""></a></li>
<li><a href="javascript:;"><img src="" alt=""></a></li>
<li><a href="javascript:;"><img src="" alt=""></a></li>
</ul>
</div>
<script>
(function(){
var LSwiperMaker = function(o){
var that = this;
this.config = o;
this.control = false;
this.sPos = {};
this.mPos = {};
this.dire;
// this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
// 这样不对的，event对象只在事件发生的过程中才有效;
this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
}
LSwiperMaker.prototype.start = function(e){
var point = e.touches ? e.touches[0] : e;
this.sPos.x = point.screenX;
this.sPos.y = point.screenY;
}
LSwiperMaker.prototype.move = function(e){
var point = e.touches ? e.touches[0] : e;
this.control = true;
this.mPos.x = point.screenX;
this.mPos.y = point.screenY;
}
LSwiperMaker.prototype.end = function(e){
this.config.dire_h && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
this.control = false;
this.config.backfn(this);
var scrollimg = this.config.bind;
var width = $(scrollimg).find('li').width();
var left = $(scrollimg).find('ul').css('left');
if(this.dire == 'L'){
left= parseInt(left)-200 +'px' ;
if(left == '-800px') left=0;
$(scrollimg).find('ul').css('left',left)
}else{
left= parseInt(left) + 200 +'px' ;
if(left == '200px') left=-600;
$(scrollimg).find('ul').css('left',left)
}
}
window.LSwiperMaker = LSwiperMaker;
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}())
var a = new LSwiperMaker({
bind:document.getElementById("scrollimg"), // 绑定的DOM对象
dire_h:true, //true 判断左右， false 判断上下
backfn:function(o){ //回调事件
document.getElementById("dire").innerHTML = "向"+ o.dire + "滑";
}
})
</script>
</body>
</html>
