<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
html,body{height: 100%;overflow: hidden;}
img{display: block;}
#wrap{position: relative;}
#wrap .list{
position: absolute;
top: 0;
left: 0;
overflow: hidden;
/*width: 500%;*/
}
#wrap .list li{
float: left;
}
#wrap .list li a img{
width: 100%;
}
#wrap .nav{
position: absolute;
left: 0;
bottom: 7px;
width: 100%;
height: 10px;
text-align: center;
line-height: 10px;
}
#wrap .nav span{
display: inline-block;
width: 10px;
height: 10px;
background: gray;
border-radius: 50%;
vertical-align: middle;
}
#wrap .nav .active{
background-color: rgba(255,0,0,0.8);
}
</style>
</head>
<body>
<div id="wrap">
<ul class="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.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/4.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/5.jpg" alt="" /></a></li>
</ul>
<div class="nav">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
//禁止鼠标的默认事件
document.addEventListener("touchstart",function(event){
event.preventDefault()
});
//加载完毕后执行以下的代码
window.οnlοad=function(){
//获取元素
var wrap=document.getElementById("wrap");
var list=document.querySelector("#wrap .list");
var liNodes=document.querySelectorAll("#wrap .list li");
var spanNodes=document.querySelectorAll("#wrap .nav span");
//布局的处理
var style=document.createElement("style");
style.innerHTML="#wrap{height: "+liNodes[0].offsetHeight +"px}";
style.innerHTML+="#wrap .list{width: "+liNodes.length +"00%}";
style.innerHTML+="#wrap .list li{width: "+100/liNodes.length+"%}";
document.head.appendChild(style);
//滑动
//定义元素的初始位置
var elemX=0;
//定义手指的初始位置
var startX=0;
//定义鼠标距离差
var dic=0;
wrap.addEventListener("touchstart",function(event){
var touch=event.changedTouches[0];
//获取元素的初始位置
elemX = list.offsetLeft;
//获取手指的初始位置
startX = touch.clientX;
})
wrap.addEventListener("touchmove",function(event){
var touch=event.changedTouches[0];
//获取手指的结束位置
var endX=touch.clientX;
//确定鼠标距离差
dic=endX - startX;
var left = elemX + dic;
//确定手指最终的位置
list.style.left = left + "px";
});
//滑动
wrap.addEventListener("touchend",function(event){
var touch=event.changedTouches[0];
var now=0;
var left=list.offsetLeft;
// //以下 now=Math.round(-left/document.documentElement.clientWidth)
// 也可以用以下代码代替,这样限定值就可以不必只为0.5
// now=-left/document.documentElement.clientWidth;
// var num=now-Math.floor(now);
// if(dic<0){
// if(num>0.5){
// now=Math.ceil(now);
// }else if(num<0.5){
// now=Math.floor(now);
// }
// }else if(dic>0){
// if(num<0.5){
// now=Math.floor(now);
// }else if(num>0.5){
// now=Math.ceil(now);
// }
// }
now=Math.round(-left/document.documentElement.clientWidth);
//限定now的范围
if(now<0){
now=0
}else if(now>liNodes.length-1){
now=liNodes.length-1
}
list.style.left = -now * document.documentElement.clientWidth + "px";
//添加滑动小圆点的特效,当图片滚动到指定位置时,小圆点处于这个位置,给目标圆点添加class
for(var i=0;i<liNodes.length;i++){
spanNodes[i].className="";
}
spanNodes[now].className="active";
})
}
</script>
</html>
移动端-轮播图
最新推荐文章于 2024-06-27 19:48:27 发布