您的位置：首页 > 移动开发
移动端触屏轮播图（完善版）

2015-06-08 11:21 453 查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320,user-scalable=no" />

<title>ios 轮播图简版</title>
<style>
*{ margin:0; padding:0;}
ul,li{margin:0; padding:0;list-style:none;}

#outer{ width:800px; height:440px; margin:10px auto 0; position:relative; overflow:hidden; border:1px solid #666; background:#999;}
#inner{  position:absolute; left:0; top:1px; }
#inner li{ width:800px; height:448px; float:left;  overflow:hidden;}
#inner li img{width:800px; height:438px; }
#selects{ position:absolute; bottom:20px; right:50px;  z-index:666;}
#selects span{ float:left; padding:5px; background:#fff; margin-right:5px; border-radius:50%;}
#selects  .on{background:red;}
.translateZ{ -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
</style>
</head>

<body>
<div id="outer">
<ul id="inner">
<li><a href="https://www.qq.com"   target="_blank">  <img src="../../images/love5.jpg"></a></li>
<li><a href="https://www.baidu.com" target="_blank"><img src="../../images/love4.jpg"/></a></li>
<li><a href="https://www.sina.com" target="_blank"><img src="../../images/love3.jpg"/></a></li>
<li><a href="https://www.163.com"  target="_blank">  <img src="../../images/106442464.jpg"/></a></li>
<li><a data-href="http://www.baidu.com" ontouchmove="this.s=1;" ontouchend="this.s||window.open(this.dataset.href);this.s=0"> <img src="../../images/love1.jpg"/></a></li>
</ul>
<div id="selects"><span class="on"></span><span></span><span></span><span></span><span></span></div>
</div>
<!--<script src="mov3.js"></script>-->
<script src="../../js/jquery-1.9.1.min.js"></script>
<script>

function getStyle(obj,attr){
return  obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj,false)[attr];
}

window.onload = function(){
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var aLi = inner.getElementsByTagName('li');
var w = parseInt(aLi[0].offsetWidth);
var innerWid=inner.style.width = aLi.length * w + 'px';
var iNow=0;
var startX = 0;
var downLeft = 0;
var bBtn=true;
var startTime=0
var maxDiatance=parseInt(w)-parseInt(innerWid);
var nowLeft=0;

//document.ontouchmove = function(e){
//e.preventDefault();
//};

inner.addEventListener("touchstart",function(e){
var self=this;
var e=e||window.event;
var touchs = e.changedTouches[0]; //手指头的一个
startX = touchs.pageX||touchs.clientX;
downLeft= parseInt(getStyle(self,'left')); //获取的是21px 带单位的  		//downLeft = this.offsetLeft;     this.offsetLeft获取不到border 以及padding
var isMoveScale=false;

inner.addEventListener("touchmove",move,false);
inner.addEventListener("touchend",end,false);

function move(e){
var e=e||window.event;
if (e.touches.length > 1 || e.scale && e.scale !== 1) return;// // 当屏幕有多个touch或者页面被缩放过，就不执行move操作

var touchs = e.changedTouches[0];
startTime=+new Date; // startTime=Date.now();//html5
nowLeft=parseInt((touchs.pageX-startX)),
self=this;
self.classList.add('translateZ');
if(downLeft>=0){//如果从左侧向右到尽头  增加阻力
if(isMoveScale){//修复跳跃问题 重置被缩小的 startX
startX = touchs.pageX||touchs.clientX;
isMoveScale=false;
}
self.style.left=nowLeft/5+'px';

}else if(downLeft<= maxDiatance){   //增加阻力
if(isMoveScale){//修复跳跃问题 重置被缩小的 startX
startX = touchs.pageX||touchs.clientX;
isMoveScale=false;
}
self.style.left=parseInt(nowLeft/5)+maxDiatance+'px';

}else {
self.style.left=nowLeft+downLeft+'px';
}
e.preventDefault();
}

function end(e){
var e=e||window.event,
touchs = e.changedTouches[0],
self=this,
aboveY=parseInt(self.style.left);

if(aboveY>0){
$(inner).animate({left:0},200,function(){
self.classList.remove('translateZ'); //移除 GPU hack
});
}
if(aboveY<0&&aboveY<maxDiatance){
$(inner).animate({left:maxDiatance+'px'},200,function(){
self.classList.remove('translateZ');  //移除 GPU hack
});
}
var toLeft=touchs.pageX||touchs.clientX;
if(toLeft<startX){//右侧往左边滑动  滑动距离大于一定 或者 滑动时间小于250毫秒
if(iNow!=aLi.length-1){

if(Math.abs(nowLeft)>parseInt(w/3)||+new Date-startTime<200&&Math.abs(nowLeft)>30){
iNow++;
//document.title='滑动了'+nowLeft+'/'+w/3+(nowLeft>w/3);
}
$(inner).stop(true,false).animate({left:-iNow*w+'px'},400);
}
}else{ //左边往右侧滑动
if(iNow!=0){
if(Math.abs(nowLeft)>parseInt(w/3)||+new Date-startTime<200&&Math.abs(nowLeft)>30){
iNow--;
}

$(inner).stop(true,false).animate({left:-iNow*w+'px'},400);
}
}

//小圆点样式
var selects=document.getElementById("selects"),
spans=selects.getElementsByTagName("span"),
i=0;
for(;i<spans.length;i++){
spans[i].className='';
}
spans[iNow].className='on';

self.removeEventListener("touchmove",move,false);
self.removeEventListener("touchend",end,false);

};

});// touchstart end

};
</script>
</body>
</html>

本文地址：http://www.cnblogs.com/surfaces/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航
移动端 触屏轮播图（完善版）

移动端触屏轮播图（完善版）
