无缝滚动

最新推荐文章于 2023-07-20 20:49:56 发布

luoping1998

最新推荐文章于 2023-07-20 20:49:56 发布

阅读量485

点赞数

分类专栏： Javascript 文章标签：计时器无缝滚动 JS 移动

本文链接：https://blog.youkuaiyun.com/Beng_shakalaka/article/details/76615124

版权

Javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何利用计时器创建一个无缝滚动的JavaScript小demo。通过将滚动内容区域的长度扩展为原始的两倍，并在特定时刻调整元素的left属性，实现了视觉上的连续滚动效果。同时，该滚动条支持鼠标悬停时暂停滚动，移开后继续滚动的功能。滚动方向可左右切换，HTML结构简洁，主要利用CSS隐藏多余内容，JavaScript处理滚动逻辑。

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

学了定时器后做了一个无缝滚动的小demo，在此小结一下。
首先，无缝滚动用到的一个小心机，就是将原来的滚动画布加长为原来的两倍，在滚动到特殊位置的时候，改变画布的left使之看起来像一直在滚动的效果。（默认为向右滚动，左端的按钮可以控制滚动方向，当鼠标移动到滚动条上时暂停滚动，移出之后继续滚动）效果如下：
这里写图片描述

html代码如下：

<body>
<input type="button" id="left" value="left"/>      //控制画布向右滚动
<input type="button" id="right" value="right"/>    //控制画布向左滚动
<div id="div1">                                   //画布所处的div块
<ul>
    <li>
        <img src="1.png"/>
    </li>
    <li>
        <img src="2.png"/>
    </li>
    <li>
        <img src="3.png"/>
    </li>
    <li>
        <img src="4.png"/>
    </li>
    <li>
        <img src="5.png"/>
    </li>
</ul>                                //利用ul设置画布为五个图片所组成
</div>

</body>
</html>

css代码如下：

    #div1{
        width:1000px;
        border: 2px pink solid;
        height: 240px;
        position: relative;
        margin:0 auto;
        overflow: hidden;
    }

    #div1 ul{
        border: 0;
        padding: 0;
        list-style-type: none;
        position: absolute;
        left: 0;
    }

    ul li{
        margin:0;
        float: left;
    }

html的代码非常简单，就是一个div里面镶嵌着一个ul，ul里面镶嵌五个li，在css中给ul设置list-style-type为none，由于滚动实际上就是利用计时器改变ul的left，所以给ul设置了position为absolute。html代码中此时只有五个li，而实际上在js代码中会将其li加倍，成为两个拼接在一起的感觉，所以在css中给div设置overflow:hidden;用来隐藏多余的li。

js代码:

window.onload=function(){

        var oDiv=document.getElementById("div1")     //获取div1
        var ul=oDiv.getElementsByTagName("ul")[0];   //获取ul
        var ali=ul.getElementsByTagName("li");       //获取ul的li数组
        var timer=null;                              //定义变量用于后面存储计时器
        var speed=2;                                 //画布滚动‘速度’

        var btnright=document.getElementById("right");    //获取btn1
        var btnleft=document.getElementById("left");      //获取btn2


        ul.innerHTML=ul.innerHTML+ul.innerHTML;           //设置ul的li为双倍li
        ul.style.width=ali[0].offsetWidth*ali.length+'px';  

        //由于ul此时内容为原来的两倍，所以ul此时的长度也为其中任意一个li的实际长度*li数组的长度

        timer=setInterval(move,30);   //存储计时器

        function move(){

                if(ul.offsetLeft<-ul.offsetWidth/2){
                    ul.style.left='0';
                }  //向左移动

                if(ul.offsetLeft>0){
                    ul.style.left=-ul.offsetWidth/2+'px';
                }   //向右移动

                ul.style.left=ul.offsetLeft+speed+'px';
        }

        btnleft.onclick=function(){
            speed=-2;
        }

        btnright.onclick=function(){
            speed=2;
        }

        ul.onmouseover=function(){
            clearInterval(timer);
            };

        ul.onmouseout=function(){

            timer=setInterval(move,30);
            };
    }