闲来无事，写了一个无缝滚动的小功能

最新推荐文章于 2022-01-14 16:29:52 发布

原创最新推荐文章于 2022-01-14 16:29:52 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#无缝滚动

web前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的轮播图自动滑动效果案例。通过设置图片列表绝对定位并利用定时器调整其位置，实现了轮播图的无缝滚动。文章还包含了响应式设计元素，确保了不同屏幕尺寸下的良好展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #move{
            height: 108px;
            width: 712px;
          /*  border: 1px solid red;*/
            margin: 50px auto;
            position: relative;
            background-color: green;
            overflow: hidden;
            cursor: pointer;
        }
        ul{
            position: absolute;
            left: 0;
            top: 0;
        }

        li{
            float: left;
            height: 108px;
            width: 178px;
            list-style: none;
        }

        li img{
            width: 100%;
            height: 100%;
        }
        a{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }
        a.a1{left:0;}
        a.a2{right:0;}
    </style>
</head>
<body>

    <div id="move">
        <a class="a1" href="javascript:;"><向左</a>
        <ul>
            <li><img src="images/0.jpg"/></li>
            <li><img src="images/1.jpg"/></li>
            <li><img src="images/2.jpg"/></li>
            <li><img src="images/3.jpg"/></li>
        </ul>
        <a class="a2" href="javascript:;">>向右</a>
    </div>

    <script>
        var oMove = document.getElementById('move');
        var oUl = oMove.getElementsByTagName('ul')[0];
        var oLi = oUl.getElementsByTagName('li');
        var oA =oMove.getElementsByTagName('a');
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = oLi[0].offsetWidth * oLi.length +'px';
        var timer =null;
        var speed = 4;
        var move = function () {

            if(oUl.offsetLeft< -oUl.offsetWidth/2){
                oUl.style.left = 0;
            }

            if(oUl.offsetLeft>0){
                oUl.style.left = -oUl.offsetWidth/2 +'px';
            }

            oUl.style.left = oUl.offsetLeft + speed +'px';
        }
        timer = setInterval(move,30);

        oA[0].onclick =function () {
            speed = -4;
        }
        oA[1].onclick =function () {
            speed = 4;
        }

        oMove.onmouseover =function (ev) {
            clearInterval(timer);
        }
        oMove.onmouseout = function (ev) {
            timer =setInterval(move,30);
        }
    </script>
</body>
</html>

效果图：