原生javascript实现无缝滚动

VPointer 发布于2019-08-22 11:11 / 2108人阅读

摘要：实现的无缝滚动需要掌握基本的定位和运动知识逐步分析图片的无缝滚动是怎么实现的的基本结构如下样式要实现图片窗口整体的无缝滚动我们需要通过定时器定时改变的位置，于是我们有下面的片段来实现对应定时器时间段内移动的距离，指开始这样做能实现基本

实现javascript的无缝滚动需要掌握基本的定位和运动知识
逐步分析图片的无缝滚动是怎么实现的
HTML的基本结构如下

CSS样式：

#moving {
  width: 600px;
  height: 370px;
  background-color: #ccc;
  position: relative;
  margin: 30px auto 0;
  overflow: hidden;
}
#moving ul {
  position: absolute;
  left: 0;
  top: 0;
}
#moving ul li {
  list-style: none;
  float: left;
}
#control {
  width:300px;
  margin: 20px auto;
}
#control input {
  margin-left: 30px;
  width: 50px;
}

要实现图片窗口整体的无缝滚动（我们需要通过定时器定时改变

oUl.style.left = oUl.offsetLeft + speed + "px";

speed对应定时器时间段内移动的距离，oUl指ul
开始这样做能实现基本的运动，但是图片总是数量有限的，当最后一张图片滚动展示完毕后，后面就没有了内容。那么我们如何克服这个困难，让滚动一直持续循环下去呢？
为了达到这种效果，我们可以克隆同样的ul结构，并且拼接在一起，比如：

oUl.innerHTML += oUl.innerHTML;

注意不要漏了在ul加入overflow:hidden，否则可能会两栏显示
但是这样做还是不够的，图片总会播放完，但是我们不可能复制成千上万分一样的ul结构
这时候需要一点小技巧
当左段ul（为了阐述方便，分为两段，左段为原始，右段为复制的那份）滚动完成，右段的开头即将离开图片窗口的时候，将整个ul拉回到原始位置。如果是向右运动，那么当左端的开头第一张图片到左边尽头时，整个ul拉回到起始位置

function move(){
            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";
        }

以下是javascript部分

    window.onload = function(){
        var oMove = document.getElementById("moving");
        var oUl = oMove.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var oCtr = document.getElementById("control");
        var oLeft = document.getElementById("left");
        var oRight = document.getElementById("right");
        var speed = null;

        oUl.innerHTML += oUl.innerHTML;  //两段一样的内容
        oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";  //两段ul宽度不够，第二段会掉下去

        oLeft.onclick = function(){
            return speed = -3;
        }
        oRight.onclick = function(){
            return speed = 3;
        }

        function move(){
            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";
        }
        var timer = setInterval(move,30);
        oMove.onmouseover = function(){
            clearInterval(timer);
        };
        oMove.onmouseout = function(){
            timer = setInterval(move,30);
        };

        var btn = document.getElementById("stop");
        btn.onclick = function(){
            clearInterval(timer);   //stop按键停止运动，如果在点击后将鼠标先移入图片再移出会重新开启
        }
    }

以上是智能社课程学习内容

云服务器 GPU云服务器 javascript无缝滚动无缝滚动水平无缝滚动文字无缝滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91932.html

vue无缝滚动的插件开发填坑分享

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

岳光 2019-08-22 14:04 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

zhangwang 2019-08-22 18:24 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

PAMPANG 2019-08-02 10:48 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

focusj 2019-08-30 15:53 评论0 收藏0
javascript定时器实现无缝滚动效果

摘要：最近学习定时器的相关知识，整理定时器实现无缝滚动的效果。当滚动超过总长度的二分之一时即，将切换到向左滚动。最近学习定时器的相关知识，整理定时器实现无缝滚动的效果。原理用定时器实现ul滚动。当滚动超过ul总长度的二分之一时（即oUl.offsetLeft

RyanHoo 2019-08-26 12:12 评论0 收藏0