纯JavaScript实现无缝滚动效果：HTML/CSS/JS完整代码解析

纯JavaScript无缝滚动实现方案

本文主要展示如何利用原生JavaScript实现无缝滚动效果，并通过详细的代码示例进行说明。该方案对前端开发者的学习或实际工作具有参考价值，适合希望了解相关实现原理的读者阅读。

HTML结构部分

<!--父容器要使用overflow: hidden;-->
<div id="imgsList" style="height:150px;width:980px;overflow: hidden;"> 
  <!--滚动容器-->
  <div id="marquee_self">
    <ul id="marquee_ul">
      <li><img src="" width="180px" height="100px"></li>
      <li><img src="" width="180px" height="100px"></li>
      <li><img src="" width="180px" height="100px"></li>
    </ul>
  </div>
</div>

CSS样式部分

#marquee_self *{
  margin: 0;
  padding: 0;
}
#marquee_self{
  width: 1620px;  //所有图片长度个数*width
  height: 100px;  //图片高度
  //margin: 100px auto; 居中
  background-color: #646464;
  position: relative;
  overflow: hidden;
}
#marquee_self ul{
  position:absolute;
  left:0;
  top:0;
  overflow: hidden; //li中超出部分隐藏掉
  background-color: #3b7796; //背景色用来看问题
}
#marquee_self ul li{
  float: left;  //左对齐变为图片水平
  width: 180px;  //图片宽度
  height: 100px; //图片高度
  list-style: none; //无间隙
}

JavaScript逻辑部分

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('marquee_self');  //容器节点
    var oUl = document.getElementById('marquee_ul');  //ul节点
    var speed = -2;  //初始化速度,默认往左

    oUl.innerHTML += oUl.innerHTML;//ul中图片内容翻倍
    var oLi= oUl.getElementsByTagName('li'); //获取ul节点下所有li集合
    oUl.style.width = oLi.length*180+'px';//设置ul的宽度翻倍后的宽度,使图片可以放下

    /*var oBtn1 = document.getElementById('btn_left'); 左移动按钮
    var oBtn2 = document.getElementById('btn_right'); 右移动按钮*/

    function move(){
      if(oUl.offsetLeft<-(oUl.offsetWidth/2)){  //向左滚动，当向左滚动超过总ul长度一半时
        oUl.style.left = 0;  //变为从头开始
      }

      if(oUl.offsetLeft > 0){    //向右滚动，当靠右的图1移出边框时
        oUl.style.left = -(oUl.offsetWidth/2)+'px';
      }

      oUl.style.left = oUl.offsetLeft + speed + 'px';  //图片移动
    }

    /*oBtn1.addEventListener('click',function(){  //向左移动按钮点击事件
      speed = -2;
    },false);
    oBtn2.addEventListener('click',function(){  //向右移动按钮点击事件
      speed = 2;
    },false);*/

    var timer = setInterval(move,30);//全局变量 ，保存返回的定时器

    oDiv.addEventListener('mouseout', function () { //鼠标移开添加计时器
      timer = setInterval(move,30);
    },false);
    oDiv.addEventListener('mousemove', function () { //鼠标移入清除定时器
      clearInterval(timer);
    },false);
  }
</script>

以上即为本文的全部内容，希望能为读者的学习带来帮助，同时也欢迎大家继续支持本站获取更多技术分享。