JS实现的新闻列表自动滚动效果示例

JS实现新闻列表自动滚动效果是一个常见的网页特效，它能够高效地展示网站上的新闻、文章、产品等信息，提高网站信息展示的效率和吸引度。在此，我将为大家介绍如何实现一个JS自动滚动效果，并提供两个实例说明来帮助大家更好地理解和应用。

准备工作

在开始制作自动滚动效果之前，我们需要先准备好一些工具和素材：

基于HTML和CSS的网页布局和样式
JavaScript代码实现自动滚动效果
图片和文字等信息素材
鼠标悬停效果的CSS样式

制作步骤

步骤一：制作静态HTML页面

首先，我们需要先制作一个基于HTML和CSS进行布局和样式设计的静态页面，该页面中包含需要展示的新闻、文章、产品等信息内容。在此，我们可以使用ul列表来展示这些信息，并且为其设置一个独立的CSS样式。

步骤二：定义JavaScript变量

JavaScript变量的定义是实现自动滚动效果的关键，需要定义三个重要的变量来控制滚动效果的实现，分别是：

ul元素对象
li元素对象集合
控制滚动方向的滚动速度和切换时间变量

var myUl = document.getElementById("myUl");//获取ul元素对象
var myLi = myUl.getElementsByTagName('li');//获取li元素对象集合
var myTimer;//自动滚动效果的定时器
var speed = 1;//滚动速度
var changeTime = 10;//切换时间

步骤三：实现自动滚动效果

在定义好变量后，我们可以利用JavaScript代码实现自动滚动效果。具体实现方法如下：

当鼠标移动到ul列表中时，停止自动滚动效果，即清除定时器
当鼠标移出列表时，重新开启自动滚动效果，即自动创建一个定时器
利用JavaScript的for循环语句，实现li元素对象的位置循环变换，即实现自动滚动效果

function autoScroll() {
    myTimer = setInterval(function(){
        for(var i=0;i<myLi.length;i++){

            if(myLi[i].offsetTop<=-myLi[i].offsetHeight){
                myLi[i].style.top=myUl.offsetHeight+'px';
            }

            var curT = myLi[i].offsetTop-speed;
            myLi[i].style.top=curT+"px";

        }
    }, changeTime);
}

myUl.onmouseover = function(){
    clearInterval(myTimer);
}
myUl.onmouseout = function(){
    autoScroll();
}
autoScroll();

步骤四：添加鼠标悬停效果

最后，我们可以添加鼠标悬停效果来进一步增强页面的交互性。一般情况下，我们可以通过为li元素设置:hover伪类，来改变鼠标悬停时的CSS样式。另外，我们还可以通过JavaScript代码来改变鼠标悬停时的滚动方向和速度等参数。

以下是两个自动滚动效果实例，希望能够帮助大家更好地理解和运用：

示例一：纵向自动滚动

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS纵向自动滚动示例</title>
<style type="text/css">
#myUl{
    position:relative;
    width:360px;height:200px;
    overflow:hidden;
}
#myUl li{
    width:360px;height:30px;
    font-size:14px;line-height:30px;
    overflow:hidden;
    position:absolute;
    top:0px;left:0px;
}
#myUl li:hover{
    background-color:#ff0;
}
</style>
</head>
<body>
<ul id="myUl">
    <li>风险史03：对该基金和资产管理公司管理人治理相关人员是否有违法、违纪、违反证券业监管规律、不当行为的记录？</li>
    <li>风险史02：该基金所投资行业是否有一定的竞争局面，是否有明显的专业壁垒，资产管理公司和基金本身专业能力又如何？</li>
    <li>风险史01：该基金是否曾出现过重大赎回、停赎或其他事故？公司管理稳定性如何？</li>
    <li>元素素09：双元素魔方精品指南：“魔力元素”的前身</li>
    <li>元素素08：臭氧与冰箱的民间疗法：极地捕手</li>
    <li>元素素07：毒瘤普及绝招：电鳞龙对战教程</li>
    <li>元素素06：双元素魔方入门指南：红蓝棍</li>
    <li>元素素05：毒瘤要角的白日梦：极光小凤</li>
    <li>元素素04：保持淡然心境 稳妥战斗方案：青蛙巨人</li>
    <li>元素素03：两元素思维碰撞：反斗鼹鼠与海象</li>
    <li>元素素02： 曾经很强的聚石灰双吼兽：烈火狮</li>
    <li>元素素01： 活在阴间的旅店老板：暗黑骑士</li>
</ul>
<script type="text/javascript">
    var myUl = document.getElementById("myUl");
    var myLi = myUl.getElementsByTagName('li');
    var myTimer;
    var speed = 1;
    var changeTime = 10;
    function autoScroll() {
        myTimer=setInterval(function(){
            for(var i=0;i<myLi.length;i++){
                if(myLi[i].offsetTop<=-myLi[i].offsetHeight){
                    myLi[i].style.top=myUl.offsetHeight+'px';
                }
                var curT = myLi[i].offsetTop-speed;
                myLi[i].style.top=curT+"px";
            }
        }, changeTime);
    }
    myUl.onmouseover = function(){
        clearInterval(myTimer);
    }
    myUl.onmouseout = function(){
        autoScroll();
    }
    autoScroll();
</script>
</body>
</html>

示例二：横向自动滚动

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS横向自动滚动示例</title>
<style type="text/css">
#myUl{
    position:relative;
    width:360px;height:80px;
    overflow:hidden;
}
#myUl li{
    float:left;width:180px;height:80px;
    font-size:14px;line-height:80px;
    overflow:hidden;
}
#myUl li:hover{
    background-color:#ff0;
}
</style>
</head>
<body>
<ul id="myUl">
    <li>元素素08：臭氧与冰箱的民间疗法：极地捕手</li>
    <li>元素素07：毒瘤普及绝招：电鳞龙对战教程</li>
    <li>元素素06：双元素魔方入门指南：红蓝棍</li>
    <li>元素素05：毒瘤要角的白日梦：极光小凤</li>
    <li>元素素04：保持淡然心境 稳妥战斗方案：青蛙巨人</li>
    <li>元素素03：两元素思维碰撞：反斗鼹鼠与海象</li>
    <li>元素素02：曾经很强的聚石灰双吼兽：烈火狮</li>
    <li>元素素01：活在阴间的旅店老板：暗黑骑士</li>
</ul>
<script type="text/javascript">
    var myUl = document.getElementById("myUl");
    var myLi = myUl.getElementsByTagName('li');
    var myTimer;
    var speed = 1;
    var changeTime = 10;
    function autoScroll() {
        myTimer=setInterval(function(){
            for(var i=0;i<myLi.length;i++){
                if(myLi[i].offsetLeft<=-myLi[i].offsetWidth){
                    myLi[i].style.left=myUl.offsetWidth+'px';
                }
                var curL = myLi[i].offsetLeft-speed;
                myLi[i].style.left=curL+"px";
            }
        }, changeTime);
    }
    myUl.onmouseover = function(){
        clearInterval(myTimer);
    }
    myUl.onmouseout = function(){
        autoScroll();
    }
    autoScroll();
</script>
</body>
</html>

以上就是JS实现新闻列表自动滚动效果示例的完整攻略，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的新闻列表自动滚动效果示例 - Python技术站