js 实现纵向和横向的无缝轮播

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 修改element ui 默认样式 ；今天我们来分享一下js 实现纵向和横向的无缝轮播。

纵向无缝轮播

1，首先HTML结构，一个大盒子包着两个子盒子，里面的第一个盒子放文字内容；第二个盒子为空盒子用来克隆第一个盒子的内容。需要注意的是box1盒子里面的内容要大于父盒子的高度否则只会上下滚动一圈之后停止。

<div id="box">
        <ul id="box1">
            <li><span>1,</span> 《金刚川》——吴京</li>
            <li><span>2,</span> 《流浪地球》——吴京</li>
            <li><span>3,</span> 《长津湖》——吴京</li>
            <li><span>4,</span> 《水门桥》——吴京</li>
            <li><span>5,</span> 《我和我的父辈》——吴京</li>
            <li><span>6,</span> 《悬崖之上》——张译</li>
            <li><span>7,</span> 《一朵小红花》——易烊千玺</li>
            <li><span>8,</span> 《少年的我》——易烊千玺</li>
            <li><span>9,</span> 《我和我的姐姐》——张子枫</li>
            <li><span>10,</span> 《这个杀手不太冷静》——马丽</li>
        </ul>
        <ul id=box2></ul>
    </div>

2，CSS代码没什么好说的根据自己的需求来设置

#box {
            margin:0 auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 60px;
            height: 300px;
            width: 260px;
            color: #6d0ee9;
            overflow: hidden;
            border: 1px solid rgb(19, 211, 211);
            padding: 20px;
           
        }

        #box li {
            height: 34px;
            line-height: 34px;
            overflow: hidden;
        }

        #box span {
            float: left
        }

3，下面来描述一下JS的相关实现逻辑

(1) 获取需要用到的DOM元素，再将box1盒子的内容克隆到box2盒子上，为实现无缝轮播做准备。

var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");

box2.innerHTML = box1.innerHTML //克隆box1为box2

(2) JS实现无缝轮播方法

如果滚动条向下滚动的距离小于或等于box1的滚动高度，那么box盒子的滚动距离加1，反之则滚动距离为0，滚动条回到顶部。

function myScroll() {
  if (box.scrollTop - box1.scrollHeight <= 0){ 
　　　box.scrollTop++; 
　　　}else { 
      box.scrollTop = 0; 
      }
 }  

(3) 设置定时器，初始化值一个定时器的值，并设置鼠标移上去清除定时器停止滚动，鼠标移开重新设置定时器。

var speed = 100;
var MyMar = setInterval(myScroll, speed) 
box.onmouseover = function () {
    clearInterval(MyMar)
    } 
    box.onmouseout = function () {
    MyMar = setInterval(myScroll, speed)
} 

效果如下，纵向匀速无缝滚动。

横向无缝轮播

HTML的结构跟纵向的是一样的,代码就不重复了;同样注意的是box1盒子的内容要比box盒子长,要不然无效。

那么我们来看看CSS代码的变化。

#box { //这里不需要定位
  width: 660px;
  height: 50px;
  color: #6d0ee9;
  overflow: hidden;
  border: 1px solid rgb(19, 211, 211);
  padding:0 20px;
  white-space: nowrap;  //这一句话不换行的代码一定要加上，否则无效
  margin: 50px auto;
 }
 #box li {  
    display: inline-block;//这里特别注意的是不能用浮动
    margin-right: 20px;
 }
 #box span {
    float: left
 }

JS 逻辑基本上都是与纵向的相同，唯一不同的就是那个myScroll的方法的逻辑需要变化，看完代码后你就会觉得其实逻辑一样的，只不过是把属性值换了 scrollTop -> scrollLeft; scrollHeight -> offsetWidth。

function myScroll() {
  if (box.scrollLeft - box1.offsetWidth <= 0) {
   box.scrollLeft ++;
  } else {
   box.scrollLeft = 0;
  }
}

横向无缝轮播效果如下

结语：

下次给大家补充一篇关于JS中的offsetWidth、offsetHeight、scrollTop、scrollLeft等等的详细介绍。好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第19天，加油！坚持就是胜利。