scroll_Left 和 scroll_Top
function scroll_Left(tar_x){
var timer = setTimeout (function () {
var current_x = document.body.scrollLeft
step = 40
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}
function scroll_Top(tar_y){ //tar_y is the distance from the top of the slider to the top of the page
//console.log('oooooooo')
var timer = setTimeout (function () {
var current_y = document.body.scrollTop
//console.log(current_y)
step = 40 //The step coefficient is the remaining distance divided by 40 to move a distance every 1ms
if (tar_y>current_y){ //tar_y > current_y scroll down
var dist = Math.ceil((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y<tar_y){ //The difference between scrolling up and scrolling down is here! !
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do down')
}
else{
window.scrollTo(0,tar_y)
//clearTimeout(timer)
}
}
else{ //tar_y < current_y scroll up
var dist = Math.floor((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y>tar_y){
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do up')
}
else{
window.scrollTo(0,tar_y)
//clearInterval(timer)
}
}
},1)
}
** Combine the gestures made by zepto to slide the carousel left and right
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name='apple-touch-fullscreen' content='yes'/>
<meta name="full-screen" content="yes"/>
<script src="./zepto.min.js"></script>
<script src="./g.js?23"></script>
</head>
<body>
<script language="javascript">
<!--
;(function($){
var winWidth = $(window).width();
var startX = 0;
var startLeft = 0;
//alert(winWidth)
$(document).on("touchstart",function(obj){
startX = obj.changedTouches["0"].clientX;
startLeft = document.body.scrollLeft;
if(startLeft < winWidth){
startLeft = 0;
}else{
startLeft = winWidth;
}
});
$(document).on("touchend",function(obj){
if(((obj.changedTouches["0"].clientX) - startX) > 100 ){
scroll_Left_prt(0);
}else if(startX - ((obj.changedTouches["0"].clientX)) > 100 ){
scroll_Left_prt(winWidth);
}else{
scroll_Left_prt(startLeft);
}
});
})(Zepto);
//-->
</script>
<style type="text/css">
*{margin:0px;padding:0px}
table{background:red;}
table td{width:10%;text-align:center}
</style>
<table width="200%" height="100%" id="tb" cellspacing="0" cellpadding="0" border="0">
<tr style="width:100%">
<td id="f">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
g.js -- resolve conflicts between two operations in a row. Include a function outside and add a global variable to judge the state
var scrolll_stop = false;
function scroll_Left_prt(tar_x){
if(scrolll_stop == true){return;}
scrolll_stop = true;
scroll_Left(tar_x);
}
function scroll_Left(tar_x){
var timer = setTimeout (function () {
var current_x = document.body.scrollLeft
step = 10;//The smaller the value, the faster the scrolling
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}