无缝滚动js

最新推荐文章于 2025-12-31 10:20:39 发布

原创最新推荐文章于 2025-12-31 10:20:39 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

html代码

  <div class="box">
        <ul>
            <li><img src="img/1.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/2.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/3.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/4.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/5.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/6.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/7.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/5.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/6.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/7.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/7.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/5.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/6.jpeg" alt="Alternate Text" /></li>
            <li><img src="img/7.jpeg" alt="Alternate Text" /></li>
        </ul>
    </div>

cs代码

 * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 460px;
            height: 100px;
            margin: 0 auto;
            position:relative;
            overflow:hidden;
            border:1px solid  red;
        }

        ul {
            width: 460px;
            height: 100px;
            display: flex;
            list-style: none;
            position:absolute;
        }
        
        img {
            height: 100px;
            vertical-align: top;
        }

js代码

    var box = document.getElementsByClassName("box")[0];
    var ul = document.getElementsByTagName("ul")[0];
    var lis = document.getElementsByTagName('li');

    console.log(ul.offsetWidth)
    //初始化移动速度
    var speed = 2;
    function run() {
        //如果跑出去了为负值，就从o开始
        if (ul.offsetLeft > ul.offsetWidth) {
            //将ul起始位置改为第一张图的宽度
            ul.style.left = lis[0].offsetWidth;
           //如果跑起来了，从左往右滑动
        } else if (ul.offsetLeft > 0) {
            //将ul起始位置设置为div的左边看不见的部分
            ul.style.left = -ul.offsetWidth + "px"
        }
        //当前距离父盒子宽度，起始位置+速度
        ul.style.left = ul.offsetLeft + speed + "px"
    }


  setInterval(run, 30);