js触摸屏滚动效果.html

最新推荐文章于 2022-12-21 10:08:27 发布

stary1

最新推荐文章于 2022-12-21 10:08:27 发布

阅读量1.9k

点赞数

分类专栏： js css

本文链接：https://blog.csdn.net/lcy132100/article/details/18667147

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="format-detection" content="telephone=no"/>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />

<title>NBA-新浪体育</title>
</head>
<style type="text/css">
.p_tabnum {
clear:both;
padding:6px 0;
text-align:center;
}
.p_tabnum li {
display:inline-block;
width:20px;
height:2px;
margin:0 4px;
background:#e7e7e7;
}
.p_tabnum li.active {
background:#d84054
}
.live_article {
overflow:hidden;
height:228px;
border:1px solid gray;
}
.live_wrap>div {
float:left;
width:100%;
position:relative
}

.page{
position:relative;
float:left;
}
.page li{
list-style-type:none;
float:left;
margin-left:25px;
border:1px solid gray;
width:25px;
}
li.active{
background-color:gray;
}
</style>
<body>

<div class="live_article" id="slide_01">
<div class="live_wrap">
<div class="js_slideItem" style="height:100px;background-color:red;float:left;">
<div style="width:30%;margin-left:2px;float:left;">
春天1号
</div>
<div style="width:30%;margin-left:2px;float:left;">
春天2号
</div>
<div style="width:30%;margin-left:2px;float:left;">
春天3号
</div>
</div>
<div class="js_slideItem" style="height:100px;background-color:gray;">
<div style="width:30%;margin-left:2px;float:left;">
夏天1号
</div>
<div style="width:30%;margin-left:2px;float:left;">
夏天2号
</div>
<div style="width:30%;margin-left:2px;float:left;">
夏天3号
</div>
</div>
<div class="js_slideItem" style="height:100px;background-color:blue;">
秋天
</div>
<div class="js_slideItem" style="height:100px">
冬天
</div>
<div class="js_slideItem" style="height:100px;background-color:yellow;">
中风
</div>
</div>

<ul class="page">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

</div>

<script>
function A(className){
if(document.getElementsByClassName){
return document.getElementsByClassName(className);
}else{
var allElements=document.getElementsByTagName("*");
var resultArray = [];
for(var i=0,j=0;i<allElements.length;i++){
if(allElements[i].className==className){
resultArray[j]=allElements[i];
j++;
}
}
return resultArray;
}
}
var F = A("js_slideItem").length;//循环节点的总的条数
var s = A("js_slideItem");//所有节点
var r = A("live_article")[0].offsetWidth; //最外层的宽度
var e = A("live_article");
var k =0;//当前显示的k序号
var d = new Array(s.length);//建立对应个数节点
var w = 300;//滑动效果时间设置
var c = A("live_wrap")[0];//二级节点
c.style.width = (s.length * r) + "px";//设置二级节点的宽度
var ul = A('page')[0].children;

while (F--) {
var E = s[F];
E.style.width = r + "px";
E.setAttribute("data-index", F);
E.style.left = (F * -r) + "px";//left值
l(F, k > F ? -r: (k < F ? r: 0), 0);
}
l(getIndex(k - 1), -r, 0);//后面一个节点
l(getIndex(k + 1), r, 0);//前面一个节点

function getIndex(E) {
return (s.length + (E % s.length)) % s.length
}
function l(F, I, H) {
var E = s[F];
var G = E && E.style;
if (!G) {//必须是DOM节点
return;
}
if(!I){//如果I为0，就选中当前节点
selectPage(F);
}
G.webkitTransitionDuration = G.MozTransitionDuration = G.msTransitionDuration = G.OTransitionDuration = G.transitionDuration = H + "ms";
G.webkitTransform = "translate(" + I + "px,0)translateZ(0)";
G.msTransform = G.MozTransform = G.OTransform = "translateX(" + I + "px)";
}
function selectPage(pageIndex){
var ac = ul[getIndex(pageIndex-1)].getAttribute('class');
if(ac){
ul[getIndex(pageIndex-1)].removeAttribute('class');
}else{
ul[getIndex(pageIndex+1)].removeAttribute('class');
}
ul[getIndex(pageIndex)].setAttribute('class','active');
}

var b = {
handleEvent: function(E) {
switch (E.type) {
case "touchstart":
this.start(E);
break;
case "touchmove":
this.move(E);
break;
case "touchend":
this.end(E);
break;
}
},
start: function(E) {

var F = E.touches[0];
h = {
x: F.pageX,
y: F.pageY,
time: +new Date
};
c.addEventListener("touchmove", this, false);
c.addEventListener("touchend", this, false)
},
move: function(E) {

//去除多点触控
if(E.touches.length >1 ){
return;
}
pause();//正在触摸移动的时候暂停操作
var F = E.touches[0];
A = {
x: F.pageX - h.x,
y: F.pageY - h.y
};
//阻止冒泡事件
E.preventDefault();
if(A.x < 0 ){//向做移动
l(k, A.x, 0);
l(getIndex(k + 1), A.x+r , 0);
}else{//向有移动
l(getIndex(k - 1), A.x-r, 0);
l(k, A.x, 0);
}
},
end: function(H) {

//求出按住时间的时间，与释放时刻的时间差
var difftime = +new Date - h.time;
//是否长时间按住
var islong = Number(difftime) < 250 && Math.abs(A.x) > 20 || Math.abs(A.x) > r / 2;
if(islong){//为true,表示长按住
var I = A.x < 0;//左右方向
if(I){//向左移动
l(getIndex(k - 1), r,0);//后面一个节点
l(getIndex(k), -r, w);//后面一个节点
l(getIndex(k+1), 0, w);//后面一个节点
k = getIndex(k + 1);//下次操作的序号
}else{//向右移动
l(getIndex(k - 2), -r, 0);//后面一个节点
l(getIndex(k - 1), 0, w);//后面一个节点
l(getIndex(k), r, w);//后面一个节点
k = getIndex(k - 1);//下次操作的序号
}
}else{
//如果是长按住，就判断是否超过中介线
l(getIndex(k - 1), -r, w);
l(k, 0, w);
l(getIndex(k + 1), r, w)
}
start();//触摸结束，手抬起来的时候开始滚动操作
c.removeEventListener("touchmove", b, false);
c.removeEventListener("touchend", b, false)
}
};
A('live_article')[0].addEventListener("touchstart", b, false)
//自动滚动
function run(){
l(getIndex(k - 1), r,0);//后面一个节点
l(getIndex(k), -r, w);//后面一个节点
l(getIndex(k+1), 0, w);//后面一个节点
k = getIndex(k + 1);//下次操作的序号
}
var y ;
//开始滚动
function start(){
if(y){//如果滑动直接滑出了边界，就去除y
pause();
}
y = setInterval(run,2000);

}
start();
//暂停
function pause(){
clearInterval(y);
}
</script>

</body></html>