js实现列表自动滚动循环播放

实现列表自动滚动循环播放，可以通过JS的定时器+无缝滚动来实现。

以下是步骤：

1、创建HTML结构

首先我们要有一个HTML结构来存放我们要用JS来动态生成的滚动列表，例如：

<ul id="scrollList">
    <li>第1行内容</li>
    <li>第2行内容</li>
    <li>第3行内容</li>
    <li>第4行内容</li>
    <li>第5行内容</li>
    ...
</ul>

2、CSS样式

我们需要对滚动列表的样式进行设置，例如：

#scrollList {
    overflow: hidden; /* 隐藏溢出部分 */
    position: relative; /* 设置相对位置 */
}

#scrollList li {
    list-style: none; /* 取消列表默认样式 */
    line-height: 30px; /* 行高 */
    position: absolute; /* 设置绝对位置 */
}

3、JS实现

接下来我们就需要用JS来实现无缝滚动了。我们可以通过定时器来控制滚动，同时需要用JS动态生成复制的列表项，实现无缝滚动的效果。

3.1、动态生成复制的列表项

我们需要复制出一个和原来列表项完全一样的列表，然后将它添加到滚动列表的末尾，这个操作需要在JS中完成。例如：

var scrollList = document.getElementById('scrollList'); //获取滚动列表
var scrollItems = scrollList.getElementsByTagName('li'); //获取所有列表项
var len = scrollItems.length; //获取列表项个数

//复制原来的列表项
var cloneItems = [];
for(var i = 0; i < len; i++) {
    cloneItems[i] = scrollItems[i].cloneNode(true);
}
//将复制的列表添加到滚动列表的末尾
for(var i = 0; i < len; i++) {
    scrollList.appendChild(cloneItems[i]);
}

3.2、控制滚动

我们需要通过定时器，来控制滚动列表的滚动。例如：

var speed = 30; //滚动速度，数值越小速度越快
var scrollTimer; //定时器变量

function startScroll() {
    //启动定时器，每隔speed毫秒执行一次scrollList函数
    scrollTimer = setInterval(scrollList, speed);
}

function scrollList() {
    if(scrollList.scrollTop % 30 == 0) {
        clearInterval(scrollTimer); //如果滚动到了一个完整的列表项，则停止定时器
        setTimeout(startScroll, 3000); //停顿3秒，再次启动定时器
    } else {
        scrollList.scrollTop += 1; //滚动列表，每隔1像素滚动一次
        if(scrollList.scrollTop >= scrollList.scrollHeight / 2) {
            scrollList.scrollTop = 0; //如果滚动到了复制的列表项的一半，则将滚动位置重置为0
        }
    }
}

在上面的代码中，我们创建了一个定时器scrollTimer，并且通过setInterval函数来启动。在定时器中，我们通过scrollList函数来控制滚动列表的滚动。我们每隔1像素滚动一次，并且判断是否滚动到了一个完整的列表项，如果是则停止定时器，并且经过3秒的停顿之后再次启动。同时，如果滚动到了复制的列表项的一半，则需要将滚动位置重置为0。

4、示例说明

下面我们通过两个示例来进一步说明实现列表自动滚动循环播放的方式。

示例一

本示例通过手动添加多个列表项，然后实现滚动列表的自动滚动。页面代码如下：

<div>
    <button onclick="startScroll()">开始滚动</button>
    <button onclick="stopScroll()">停止滚动</button>
</div>
<ul id="scrollList">
    <li>第1行内容</li>
    <li>第2行内容</li>
    <li>第3行内容</li>
    <li>第4行内容</li>
    <li>第5行内容</li>
    <li>第6行内容</li>
    <li>第7行内容</li>
</ul>
<script>
//动态生成复制的列表项
var scrollList = document.getElementById('scrollList');//获取滚动列表
var scrollItems = scrollList.getElementsByTagName('li');//获取所有列表项
var len = scrollItems.length;//获取列表项个数

//复制原来的列表项
var cloneItems = [];
for(var i = 0; i < len; i++) {
    cloneItems[i] = scrollItems[i].cloneNode(true);
}
//将复制的列表添加到滚动列表的末尾
for(var i = 0; i < len; i++) {
    scrollList.appendChild(cloneItems[i]);
}

var speed = 30; //滚动速度，数值越小速度越快
var scrollTimer; //定时器变量

function startScroll() {
    //启动定时器，每隔speed毫秒执行一次scrollList函数
    scrollTimer = setInterval(scrollListFunc, speed);
}

function scrollListFunc() {
    if(scrollList.scrollTop % 30 == 0) {
        clearInterval(scrollTimer); //如果滚动到了一个完整的列表项，则停止定时器
        setTimeout(startScroll, 3000); //停顿3秒，再次启动定时器
    } else {
        scrollList.scrollTop += 1; //滚动列表，每隔1像素滚动一次
        if(scrollList.scrollTop >= scrollList.scrollHeight / 2) {
            scrollList.scrollTop = 0; //如果滚动到了复制的列表项的一半，则将滚动位置重置为0
        }
    }
}

function stopScroll() {
    clearInterval(scrollTimer); //停止定时器
}
</script>

在上面的示例中，我们通过手动添加多个列表项，然后用JS动态生成复制的列表，并且实现了滚动列表的自动滚动。按钮分别用来开始和停止滚动。

示例二

本示例通过AJAX异步请求数据，得到数据后用JS动态生成滚动列表，并且实现了无缝滚动。页面代码如下：

<div>
    <button onclick="startScroll()">开始滚动</button>
    <button onclick="stopScroll()">停止滚动</button>
</div>
<ul id="scrollList"></ul>
<script>
    //通过AJAX异步请求数据，并且用JS动态生成滚动列表
    function loadData() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                var scrollList = document.getElementById('scrollList');
                var len = data.length;
                for(var i = 0; i < len; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = data[i].title;
                    scrollList.appendChild(li);
                }
                //复制原来的列表项
                var cloneItems = [];
                for(var i = 0; i < len; i++) {
                    cloneItems[i] = scrollList.getElementsByTagName('li')[i].cloneNode(true);
                }
               //将复制的列表添加到滚动列表的末尾
               for(var i = 0; i < len; i++) {
                    scrollList.appendChild(cloneItems[i]);
               }
               startScroll();//开始无缝滚动
            }
        }
        xhr.open('GET', 'data.json', true);
        xhr.send();
    }

    var speed = 30; //滚动速度，数值越小速度越快
    var scrollTimer; //定时器变量
    var scrollList = document.getElementById('scrollList');//获取滚动列表

    function startScroll() {
        //启动定时器，每隔speed毫秒执行一次scrollListFunc函数
        scrollTimer = setInterval(scrollListFunc, speed);
    }

    function scrollListFunc() {
        if(scrollList.scrollTop % 30 == 0) {
            clearInterval(scrollTimer); //如果滚动到了一个完整的列表项，则停止定时器
            setTimeout(startScroll, 3000); //停顿3秒，再次启动定时器
        } else {
            scrollList.scrollTop += 1; //滚动列表，每隔1像素滚动一次
            if(scrollList.scrollTop >= scrollList.scrollHeight / 2) {
                scrollList.scrollTop = 0; //如果滚动到了复制的列表项的一半，则将滚动位置重置为0
            }
        }
    }

    function stopScroll() {
        clearInterval(scrollTimer); //停止定时器
    }

    loadData();//加载数据，并且实现滚动
</script>

在上面的示例中，我们通过AJAX异步请求数据，得到数据后用JS动态生成滚动列表，并且实现了无缝滚动。按钮分别用来开始和停止滚动。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现列表自动滚动循环播放 - Python技术站