【JS案例】JS实现自动滚动的新闻列表

Array[林]

已于 2022-07-21 09:38:14 修改

阅读量3.5k

点赞数 2

分类专栏：前端前端——JavaScript 文章标签： javascript css html

于 2021-09-13 21:38:57 首次发布

本文链接：https://blog.csdn.net/m0_50785976/article/details/120274043

版权

本文介绍了使用JavaScript实现新闻列表自动滚动的两种方法：一是通过定时器改变列表的top值，二是通过定时器改变包裹列表父元素的scrollTop值。详细讲解了逻辑和相关代码实现，并涉及到JavaScript的数学函数、类型转换以及事件监听。

摘要由CSDN通过智能技术生成

JS如何实现自动滚动的新闻列表,我总结了两种方法:

一、定时器对列表的top值进行改变

二、定时器对包装列表的父元素的scrollTop值进行改变

方法一、定时器对列表的top值进行改变

html代码：

<div class="newList" id="newList1">
        <div class="poem">
            <ul>
                <li>致橡树</li>
            <li>舒婷</li>
            <li>我如果爱你</li>
            <li>绝不像攀援的凌霄花</li>
            <li>借你的高枝炫耀自己</li>
            <li>我如果爱你</li>
            <li>绝不学痴情的鸟儿</li>
            <li>为绿荫重复单调的歌曲</li>
            <li>也不止像泉源,常年送来清凉的慰藉</li>
            <li>也不止像险峰，增加你的高度，衬托你的威仪</li>
            <li>甚至日光，甚至春雨</li>
            <li>不，这些都还不够</li>
            <li>我必须是你近旁的一株木棉</li>
            <li>作为树的形象和你站在一起</li>
            <li>根，紧握在地下</li>
            <li>叶，相触在云里</li>
            <li>每一阵风过，我们都互相致意</li>
            <li>但没有人，听懂我们的言语</li>
            <li>你有你的铜枝铁干</li>
            <li>像刀，像剑，也像戟</li>
            <li>我有我红硕的花朵</li>
            <li>像沉重的叹息，又像英勇的火炬</li>
            <li>我们分担寒潮、风雷、霹雳</li>
            <li>我们共享雾霭、流岚、虹霓</li>