移动端实现无缝左右滑动的问题

如图红框部分所示它可以左右无缝滑动每次滑动的时候显示红框部分的内容应该是滑动了整屏的宽度吧不知道我理解对不对然后还有一种滑动距离太小又被拉回去的感觉
写了很久效果实在不行想请教大家有没有好的解决方法呢
图片描述

阅读 2.6k

<!DOCTYPE html>
<html>
<head>

<title></title>
<meta charset="utf-8">
<style type="text/css">
    
    *{
        margin:0;
        padding:0;
    }

    #box{
        width:800px;
        height:100px;
        position:relative;
        overflow: hidden;
    }

    ul{
        list-style: none;
        position:absolute;
        width:2000px;
        left:0; 
        top:10px;
    }

    ul li{
        width:200px;
        height:100px;
        background:#ccc;
        float: left;
        margin:5px;
    }

    .red{
        background:red;
    }

    .blue{
        background: blue;
    }

    .green{
        background: green;
    }

</style>

</head>
<body>


<ul id="ul">
    <li></li>
    <li class="red"></li>
    <li class="blue"></li>
    <li class="green"></li>
</ul>

</div>

var ul = document.getElementById("ul");
var lis = ul.getElementsByTagName("li");
var len = lis.length;
var width = len 2 210; // li的宽度+margin
var html = ul.innerHTML; // ul的内容

// 动态设置ul内容和width
html += html;
ul.innerHTML = html;
ul.style.width = width + 'px';

setInterval(function(){

var left = ul.offsetLeft;

if(-left == width - 800){
    left = -(width / 2 - 800);
}

ul.style.left = --left + "px";

},1000 / 60)

</script>

</body>
</html>
这是我的例子，你可以参考一下

移动端实现无缝左右滑动的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

移动端实现无缝左右滑动的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？