javascript实现的左右无缝滚动效果

实现左右无缝滚动效果，可借助于jQuery插件Marquee或Carousel等实现。本文以实现无限滚动轮播为例，提供以下详细攻略。

使用jQuery Marquee插件实现无限滚动轮播

jQuery Marquee是一款jQuery插件，用来实现前端展示的无限滚动，尤其适用于网站的一些公告、广告等需要循环横幅展示的业务场景。实现步骤如下：

引入jQuery和jQuery Marquee插件库文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.5.0/jquery.marquee.min.js"></script>

HTML结构

<div class="marquee_box">
  <ul class="marquee_content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

CSS样式

.marquee_box {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee_content {
  display: inline-block;
  position: absolute;
  width: 100%;
}

JavaScript代码

$('.marquee_content').marquee({
  duration: 5000, // 动画效果时间
  delayBeforeStart: 0, // 开始动画前延迟
  direction: 'left', // 动画滚动方向
  duplicated: true // 是否循环滚动
});

使用JavaScript实现无限滚动轮播

如果不想使用插件，可以使用JS代码实现无限滚动轮播，具体步骤如下：

获取元素和数据

const box = document.querySelector('.carousel_box');
const content = document.querySelector('.carousel_content');
const items = [...content.children];

复制元素并插入对应位置

content.append(items[0].cloneNode(true));
content.prepend(items[items.length - 1].cloneNode(true));

重新获取元素

const itemsNew = [...content.children];

设置样式属性

content.style.width = `${itemsNew.length * 100}%`;
content.style.left = '-100%';
itemsNew.forEach(item => item.style.width = `${100 / itemsNew.length}%`);

定义轮播函数

function carousel() {
  const distance = parseInt(content.style.left) - 100;
  content.style.transition = 'left 0.5s';
  content.style.left = `${distance}%`;

  setTimeout(() => {
    if (distance == -(itemsNew.length - 1) * 100) {
      content.style.transition = 'none';
      content.style.left = '-100%';
    }
    if (distance == 0) {
      content.style.transition = 'none';
      content.style.left = `${-(itemsNew.length - 2) * 100}%`;
    }
  }, 500);
}