JS无缝滚动效果实现方法分析

2023年6月11日上午2:12 • JavaScript

下面我会以标准的markdown格式文本，详细讲解“JS无缝滚动效果实现方法分析”的完整攻略。

简介

JS无缝滚动效果是一种常见的网页动态效果，常用于展示图片、消息、公告等内容。它可以让网页更加动态有趣，提高用户体验。

实现思路

实现JS无缝滚动效果的主要思路如下：

将需要滚动的内容复制一份，并在原内容的后面拼接。
使用定时器不断移动内容的位置。
当移动到复制内容的末尾时，重置位置到原内容的末尾，形成无限循环滚动的效果。

实现步骤

步骤1：HTML结构

首先需要在HTML中定义需要滚动的内容，例如图片、公告等。例如下面的图片轮播组件：

<div class="slider">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
</div>

步骤2：CSS样式

需要为滚动内容的容器和内容定义CSS样式，例如固定宽度、高度、溢出隐藏等。例如下面的CSS样式：

.slider {
    width: 600px;
    height: 400px;
    overflow: hidden;
}

.slider ul {
    width: 1800px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slider li {
    float: left;
    width: 600px;
    height: 400px;
}

步骤3：JS代码

步骤3.1：复制和拼接内容

复制和拼接内容的代码如下所示：

// 获取需要滚动的内容的列表
let $sliderList = $('.slider ul');

// 复制轮播内容，并拼接到尾部
$sliderList.append($sliderList.clone());

步骤3.2：定时器移动内容位置

定时器移动内容位置的代码如下所示：

// 定义定时器，每秒移动 1px
let timer = setInterval(function(){
    // 获取当前的滚动位置
    let curPos = $sliderList.position().left;

    // 计算下一个滚动位置
    let newPos = curPos - 1;

    // 移动内容的位置
    $sliderList.css({ left: newPos });

    // 如果滚动到复制内容的末尾，重置位置到原内容的末尾
    if (Math.abs(newPos) >= $sliderList.width() / 2) {
        $sliderList.css({ left: 0 });
    }
}, 10);

步骤3.3：停止定时器

如果需要停止定时器，可以使用如下的代码：

clearInterval(timer);

示例说明

下面提供两个示例说明如何使用上述代码实现JS无缝滚动效果。

示例1：文字滚动

首先，定义HTML结构和CSS样式，代码如下所示：

<div class="news">
    <ul>
        <li>这是一条新闻1</li>
        <li>这是一条新闻2</li>
        <li>这是一条新闻3</li>
        <li>这是一条新闻4</li>
        <li>这是一条新闻5</li>
    </ul>
</div>

.news {
    width: 500px;
    height: 30px;
    overflow: hidden;
}

.news ul {
    width: 10000px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.news li {
    float: left;
    width: 200px;
    line-height: 30px;
}

然后，使用如下的JS代码实现无缝滚动效果：

// 获取需要滚动的内容的列表
let $newsList = $('.news ul');

// 复制内容，并拼接到尾部
$newsList.append($newsList.clone());

// 定义定时器，每秒移动 1px
let timer = setInterval(function(){
    let curPos = $newsList.position().left;
    let newPos = curPos - 1;
    $newsList.css({ left: newPos });
    if (Math.abs(newPos) >= $newsList.width() / 2) {
        $newsList.css({ left: 0 });
    }
}, 10);

示例2：图片轮播