标签：
以前自己用纯js写的，找了N就都没找到，还是从同事哪里重新拿过来的，仅是备忘，看过新浪新闻的手机触屏端后，自己写了个效果，比新浪的省代码多了
<!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) {
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(){
y = setInterval(run,2000);
}
start();
//暂停
function pause(){
clearInterval(y);
}
</script>
</body></html>
标签：
原文地址：http://www.cnblogs.com/dexian/p/4631147.html
