5、滑屏轮播——左右不过界版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>滑屏轮播——左右不过界版</title>
<!--
需要掌握知识点:
1、左右移动做限制,不能超出;
-->
<style id="css">
body{
margin: 0;
}
#wrap{
overflow: hidden;
position: relative;
}
#list{
margin: 0;
padding: 0;
list-style: none;
}
#list li{
float: left;
}
#list img{
width: 100%;
display: block;
}
#nav{
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
}
#nav span{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background: black;
}
#nav .active{
background: #fff;
}
.clear:after{/* 用于清除浮动 */
content: "";
display: block;
clear: both;
}
</style>
<script type="text/javascript" src="cssTransform.js" ></script>
<script>
document.addEventListener(
//用于阻止系统默认的菜单、文字默认选中、橡皮筋回弹效果
//缺点:系统默认滚动条消失
"touchstart",
function(e){
e.preventDefault();
}
);
window.onload = function(){
var wrap=document.querySelector('#wrap');
var list=document.querySelector('#list');
var lis=document.querySelectorAll('#list li');
var navSpan=document.querySelectorAll('#nav span');
//用JS动态设置wrap的高度和ul、li的width;
var css=document.querySelector('#css');
var style="#wrap{height:"+lis[0].offsetHeight+"px;}";
style+="#list{width:"+lis.length*100+"%}";
style+="#list li{width:"+(1/lis.length)*100+"%}";
css.innerHTML+=style;
var startPoint=0;//用于储存手指按下的坐标
var startX=0;//用于储存手指按下时滚动层UL的translateX位移值
var wrapW=wrap.offsetWidth;//wrap的占位宽
cssTransform(list,"translateX",0);//设置滚动层的初始化的translateX值
wrap.addEventListener(
"touchstart",
function(e){
var touch = e.changedTouches[0];
startPoint=touch.pageX;//手指按下时手指距离屏幕X轴的距离
startX=cssTransform(list,"translateX");//手指按下时滚动层UL的translateX位移值
list.style.transition="none";
}
);
wrap.addEventListener(
"touchmove",
function(e){
var touch=e.changedTouches[0];
var nowPoint=touch.pageX;//手指移动时手指距离屏幕X轴的距离
var distance=nowPoint-startPoint;//手指移动时距离
cssTransform(list,"translateX",startX+distance);//设置手指移动时的translateX
}
);
wrap.addEventListener(
"touchend",
function(){
var translateX=cssTransform(list,"translateX");
//判断移动超过一半时自动移动下一张,未到一半时回到当前张
var now = Math.round(-translateX/wrapW);
if(now<0){
now=0;
}
if(now>(lis.length-1)){
now=lis.length-1;
}
translateX = -now*wrapW;
list.style.transition="0.5s";
cssTransform(list,"translateX",translateX);
//下面的pagination跟随图片一起更新位置
for(var i=0,len=lis.length;i<len;i++){
navSpan[i].className="";
}
navSpan[now].className="active";
}
);
}
</script>
</head>
<body>
<div id="wrap"><!-- 包裹层 -->
<ul id="list" class="clear"><!-- 滑动层 -->
<li><a href="#"><img src="img/1.jpg"/></a></li>
<li><a href="#"><img src="img/2.jpg"/></a></li>
<li><a href="#"><img src="img/3.jpg"/></a></li>
<li><a href="#"><img src="img/4.jpg"/></a></li>
</ul>
<nav id="nav"><!-- 底部按钮 -->
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</body>
</html>