javascript 图片无缝滚动效果解析
  • 分享到微信朋友圈
    X
立即下载 查看演示

如何使用javascript制作图片的无缝滚动效果呢？首先我说一下思路,这里我定义2个div容器，一个是demo1,一个是demo2, 我的目标是demo1从最初点开始向左匀速滚动，当滚动到demo1的最后一张图片的时候，使用偏移距离，让demo1重新开始滚动， 这样便达成了无缝滚动效果，那么有一个问题就是demo1向左滚动的时候demo1滚动剩余的宽度小于整个滚动效果宽度的时候，这样右侧便出现了空白距离。会很难看自然达不到无缝滚动的效果。那么怎么办呢，所以我定义了一个demo2, 我们把节点demo1中的html内容复制一份到节点demo2中，当demo1向左滚动的剩余宽度小于整个滚动效果宽度的时候让demo2紧紧跟着demo1向左滚动，当demo1滚动完以后，立刻让demo1重新滚动 这样便达到了图片无缝滚动效果

出现了空白部分.png
出现了空白距离

关键技术点

  • 计时器调用滚动的方法，达到匀速滚动效果

  • 节点demo1中的html内容复制到节点demo2中

  • javascript对demo1与demo2交界位置的判断

  • overflow:hidden 对溢出部分的隐藏，隐藏超出部分的内容，防止其显示在容器之外。

  • 鼠标移入移出对效果的影响

关键代码与说明

<script>
    //无缝滚动 
    var speed = 20; //数字越大速度越慢
    var tab = document.getElementById("demo"); //根据id获取元素
    var tab1 = document.getElementById("demo1"); //根据id获取元素
    var tab2 = document.getElementById("demo2"); //根据id获取元素
    tab2.innerHTML = tab1.innerHTML; //把节点tab1中的html内容复制一份到节点tab2中
    function Marquee() {
        ///当滚动至demo1与demo2交界时
        if (tab2.offsetWidth - tab.scrollLeft <= 0)
        //偏移距离，下面滚动条，返回到原处
            tab.scrollLeft -= tab1.offsetWidth
        else {
            //继续做滚动
            tab.scrollLeft++;
        }
    }
    //定义计时器每20毫秒调用Marquee一次
    var MyMar = setInterval(Marquee, speed);
    //鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseover = function () { clearInterval(MyMar) };
    //鼠标移开时重设定时器
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) }; 
</script>

当鼠标移上时清除定时器达到滚动停止的目的，当鼠标移开时重设定时器继续滚动，speed数字越大滚动速度就会越慢，最重要的一点要知道demo2并不参与到滚动，它只是填补了demo1滚动后的空白位置。