移动端图片无缝滚动是如何实现的？代码

本篇文章给大家带来的内容是关于移动端图片无缝滚动是如何实现的？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!doctype html>
<html>
<head>
<Meta charset=UTF-8 />
<Meta name=viewport content=width=device-width,user-scalable=no>
<title>Document</title>
<script type=text/javascript>
//获取html
var html = document.documentElement;
//设置html的字体大小 = 可视区的宽度 / 15
html.style.fontSize = html.clientWidth / 15 + 'px';
//阻止pc和浏览器默认行为。
document.addEventListener（'touchstart',function（ev）{
ev.preventDefault（）；
}）；
</script>
<style>
body{
margin: 0;
}
.wrap{
height: 4.68rem;
position: relative;
}
.list{
padding: 0;
margin: 0;
width:400%;
position: absolute;
top:0;
left:0;
list-style: none;
}
.list li{
float: left;
width:15rem;
}
.list img{
width:15rem;
display: block;
}
nav{
width:15rem;
height: 10px;
position: absolute;
bottom:5px;
z-index: 1;
text-align:center;
}
nav a{
width:15px;
height: 15px;
display: inline-block;
background: red;
border-radius:50%;
vertical-align:top;
}
nav a.active{
background:#fff;
}
</style>
</head>
<body>
<section>
<ul>
<li>
<img src=img/img.jpg alt= />
</li>
<li>
<img src=img/img2.jpg alt= />
</li>
<li>
<img src=img/img3.jpg alt= />
</li>
<li>
<img src=img/img4.jpg alt= />
</li>
</ul>
<nav>
<a href=javascript:;></a>
<a href=javascript:;></a>
<a href=javascript:;></a>
<a href=javascript:;></a>
</nav>
</section>
<script type=text/javascript>
var wrap=document.getElementsByClassName（wrap）[0],
list=document.getElementsByClassName（list）[0],
disX=0,
listL=0,
n=0,
w=wrap.clientWidth,
s=0,
timer=0;
a=document.getElementsByTagName（a）；
list.addEventListener（touchstart,start）；
list.addEventListener（touchmove,move）；
list.addEventListener（touchend,end）；
list.innerHTML+=list.innerHTML;
len=list.children.length;
console.log（len）；
list.style.width=w*len+px;
function start（ev）{
clearInterval（timer）；
var e=ev.changedtouches[0];
disX=e.pageX;
list.style.transition=none;
var num=Math.round（list.offsetLeft/w）；
list.style.left=num*w+px;
if（num==0）{
num=a.length;
list.style.left=-num*w+px;
}
if（-num==len-1）{
num=a.length-1;
list.style.left=-num*w+px;
}
listL=this.offsetLeft;
}
function move（ev）{
var e=ev.changedtouches[0];
list.style.left=（e.pageX-disX）+listL+px;
}
function end（）{
var num=Math.round（list.offsetLeft/w）；
console.log（num）
list.style.transition=0.5s;
list.style.left=num*w+px;
a[n].className=;
a[（-num）%a.length].className=active;
n=（-num）%a.length;
timer=setInterval（function（）{
inn（）；
},1000）
s=-num;
}
timer=setInterval（function（）{
inn（）；
},1000）
function inn（）{
s++;
list.style.left=-s*w+px;
list.style.transition=0.5s;
console.log（s）；
if（s>len-1）{
s=a.length-1;
list.style.transition=none;
list.style.left=-s*w+px;
console.log（list.style.left）；
setTimeout（function（）{
list.style.transition=0.5s;
s++;
list.style.left=-s*w+px;
a[n].className=;
a[s%a.length].className=active;
n=s%a.length;
},30）
}
a[n].className=;
a[s%a.length].className=active;
n=s%a.length;
}
</script>
</body>
</html>
移动端图片无缝滚动是如何实现的？代码

相关推荐
