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

!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">
    //获取htmlVAR html = document.documentElement;
    //设置html的字体大小 = 可视区的宽度 / 15html.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>
    

以上就是对移动端图片无缝滚动是如何实现的？（代码）的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是移动端图片无缝滚动是如何实现的？（代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！