<!DOCTYPE html>
<html lange='en'>
<head>
<meta charset='UTF-8'>
<title></title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
670px;
height: 250px;
position: relative;
margin: 50px;
overflow: hidden;
background: pink;
}
#ul1 {
position: absolute;
left: 0;
}
#ul1 li {
670px;
height: 250px;
float: left;
list-style: none;
}
#ul1 li img{
670px;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var w = aLi[0].offsetWidth;
oUl.style.width = aLi.length * w + 'px';
var downLeft = 0;
var donwX = 0;
var iNow = 0;
var downTime = 0;
var bBtn;
oUl.ontouchstart = function(ev) {
console.log(1)
var touchs = ev.changedTouches[0];
donwX = touchs.pageX;
downLeft = this.offsetLeft;
bBtn = true;
downTime = Date.now();
}
// console.log(donwX)
oUl.ontouchmove = function(ev) {
var touchs = ev.changedTouches[0];
if (this.offsetLeft >= 0) {
if (bBtn) {
donwX = touchs.pageX;
bBtn = false;
}
this.style.left = (touchs.pageX - donwX) / 3 + 'px';
console.log(1)
} else if (this.offsetLeft <= oDiv.offsetWidth - oUl.offsetWidth) {
console.log(oDiv.offsetWidth - oUl.offsetWidth)
if (bBtn) {
donwX = touchs.pageX;
bBtn = false;
}
this.style.left = (touchs.pageX - donwX) / 3 + (oDiv.offsetWidth - oUl.offsetWidth) + 'px';
console.log(2)
} else {
// debugger;
this.style.left = touchs.pageX - donwX + downLeft + 'px';
// console.log(touchs.pageX - donwX + downLeft+'this is')
console.log(3)
}
}
oUl.ontouchend = function(ev) {
var touchs = ev.changedTouches[0];
if (touchs.pageX < donwX) { //左
if (iNow < aLi.length - 1) {
// alert(Date.now() - downTime<300)
if (donwX - touchs.pageX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && donwX - touchs.pageX > 30)) {
iNow++;
}
}
$('#ul1').animate({ 'left': -iNow * w });
} else { //右
// debugger;
if (iNow > 0) {
if (touchs.pageX - donwX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && touchs.pageX - donwX > 30)) {
iNow--;
}
}
$('#ul1').animate({ 'left': -iNow * w });
}
}
</script>
<!--
1、用户划动超过图片的一半或者用户快速的滑过时才滚动一页
2、如果是在第1页，或者最后一页时移动的速度放慢3倍。
-->