java js滑动列表_JS实现的新闻列表自动滚动效果示例

本文实例讲述了JS实现的新闻列表自动滚动效果。分享给大家供大家参考，具体如下：

Title

#box{width:260px;height:100px;margin:0 auto;border:2px solid red;overflow: hidden}

ul{padding:0;margin:0;list-style: none;overflow: hidden}

ul li{height:24px;line-height: 24px;padding-left:10px;}

a{text-decoration: none;color:#000;}

a:hover{color:#f00}

• 1,课程html
• 2,课程css
• 3,课程js
• 4,课程jquery
• 5,课程html5
• 6,课程css3
• 7,课程hp
• 8,课程bpootstrap
• 9,课程apicloud

var box=document.getElementById("box");

var con1=document.getElementById("con1");

var con2=document.getElementById("con2");

var s=document.getElementsByTagName("a");

var speed=50;

con2.innerHTML=con1.innerHTML;

function ScrollUp(){

if( box.scrollTop>=con1.scrollHeight){

box.scrollTop=0;

}else

box.scrollTop++;

}

var i=setInterval("ScrollUp()",speed);

function Stop(){

clearInterval(i);

}

function Up(){

i=setInterval("ScrollUp()",speed);

}

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：

希望本文所述对大家JavaScript程序设计有所帮助。