效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端触屏事件</title>
<style>
*{
margin:0;
padding:0;
touch-action: none;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
display:block;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
position: relative;
}
#list{
position: absolute;
/* width:500%; */
/* overflow: hidden;解决浮动的高度塌陷 */
}
#list li{
/* width:20%; */
float: left;
}
#list li img{
width:100%;
}
#wrap .icons{
position: absolute;
left:0;
bottom: 10px;
width:100%;
height: 10px;
text-align: center;
}
#wrap .icons span{
display: inline-block;
width:10px;
height: 10px;
background: grey;
border-radius: 50%;
}
#wrap .icons span.active{
background: deeppink;
}
</style>
</head>
<body>
<!-- javascript:;这个才是让a链接不产生页面刷新变化,直接是空链接 -->
<!-- a链接中写#会产生页面的刷新变化 -->
<div id="wrap">
<ul id="list">
<li><a href="javascript:;"><img src="./img/下载1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/下载2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/下载3.gif" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/下载3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/下载4.gif" alt=""></a></li>
</ul>
<div class="icons">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
//解除浏览器的默认行为
document.addEventListener('touchstart',function(event){
event.preventDefault();
});
//获取元素
var wrap=document.getElementById('wrap');
var list=document.getElementById('list');
list.innerHTML+=list.innerHTML;
var liNodes=document.querySelectorAll('#list li');
var spanNodes=document.querySelectorAll('.icons span');
//创建样式标签存放里面
var styleNode=document.createElement('style');
styleNode.innerHTML='#list{width:'+liNodes.length+'00%;}';//图片乘以百分比
//等于是覆盖 加等于是拼接
styleNode.innerHTML+='#list li{width:'+100/liNodes.length+'%}';//换算图片比例
styleNode.innerHTML+='#wrap{height:'+liNodes[0].offsetHeight+'px;}';
document.head.appendChild(styleNode);//添加样式
//滑动
//定义元素初始位置
var eleX=0;
//定义手指初始位置
var stratX=0;
//定义手指距离差
// var disX=0;
//offsetLeft无法获取通过2D变换产生的偏移,可以通过translateX变量来记录偏移量。
var translateX=0;
//需要一个索引值
var now=0;
//1.触摸开始
wrap.addEventListener('touchstart',function(event){
var touch=event.changedTouches[0];
//初始时清除过渡效果
list.style.transition="none";
stratX=touch.clientX;
//用now值修改边界值,做出无缝滑屏效果(滑倒最后一张,自动回到第一张,继续轮播)
if(now==0){//spanNodes.length值为5
now=spanNodes.length;//当now值为最后一张时,让小圆点自动回到下一组的图片第一张
}else if(now ==liNodes.length-1){
now=spanNodes.length-1;//10-1=9
}
//根据当前的now值修改位置
translateX=-now*document.documentElement.clientWidth;
eleX=translateX;//记录偏移量
list.style.transform='translateX('+translateX+'px)';
})
//2.move
wrap.addEventListener('touchmove',function(event){
var touch=event.changedTouches[0];
//手指结束位置
var endX=touch.clientX;
//手指距离差
var disX=endX - stratX;//原始位置
translateX=disX + eleX;//手指距离差+原来的位置=最新偏移量
list.style.transform='translateX('+translateX+'px)';
})
//3.end跳转的时候做出改变
wrap.addEventListener('touchend',function(event){//touchend跳转的逻辑
var touch=event.changedTouches[0];
//当前元素得位置
var left =translateX;
console.log(left);
//向左滑动 disX<0 让图片去下一张
// if(disX<0){//当前位置/浏览器的位置
// now=Math.round(-left/document.documentElement.clientWidth);//ceil向上取整
// }else{
// //向右滑动 disX>0 让图片去上一张
// now=Math.round(-left/document.documentElement.clientWidth);//floor向下取整
// }
now=Math.round(-left/document.documentElement.clientWidth);
//范围限定 索引最小值为0 最大值为图片总个数
// if(now<0){//无缝滚动了,所以不需要限制图片个数了。
// now=0;
// }else if(now>liNodes.length-1){
// now=liNodes.length-1;
// }
// now*document.documentElement.clientWidth:解析是当前索引乘以浏览器宽度
translateX=-now * document.documentElement.clientWidth;//图片索引位置
//添加过渡
list.style.transition='1s transform';//2s transform属性名
list.style.transform='translateX('+translateX+'px)';
//小圆点
for(var i=0;i<spanNodes.length;i++){//所有的先清除
spanNodes[i].className='';
}
spanNodes[now%spanNodes.length].className='active';
})
}
</script>
</body>
</html>
总结:2D转换过渡效果,比定位方法的实现,更好的解决性能的优化。