<style type="text/css">
<!--
BODY {
PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0px autoCOLOR: blackLINE-HEIGHT: 150%PADDING-TOP: 10pxBACKGROUND-COLOR: whiteTEXT-ALIGN: center
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#cntR,#cntR2 {
WIDTH: 302px
}
#NewsTop,#NewsTop2 {
CLEAR: bothMARGIN-BOTTOM: 16px
}
#NewsTop P,#NewsTop2 P {
FLOAT: leftLINE-HEIGHT: 21px
}
#NewsTop P.topTit,#NewsTop2 P.topTit {
FONT-WEIGHT: boldWIDTH: 117px
}
#NewsTop P.topC0,#NewsTop2 P.topC0 {
BACKGROUND: #dcdcdcBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCURSOR: pointer
}
#NewsTop P.topC1,#NewsTop2 P.topC1 {
BACKGROUND: #c2130eBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCOLOR: #fff
}
#NewsTop #NewsTop_tit,#NewsTop2 #NewsTop_tit2 {
BORDER-BOTTOM: #c2130e 3px solidHEIGHT: 21px
}
#NewsTop #NewsTop_cnt,#NewsTop2 #NewsTop_cnt2 {
PADDING-LEFT: 32pxBACKGROUND: url(http://www.qpsh.com/icon/1-10.gif) no-repeat 12px 13pxLINE-HEIGHT: 26pxPADDING-TOP: 7pxHEIGHT: 260pxTEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A,#NewsTop2 #NewsTop_cnt2 A {
COLOR: #666TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover,#NewsTop2 #NewsTop_cnt2 A:hover {
COLOR: #c2130eTEXT-DECORATION: underline
}
-->
</style>
</HEAD>
<BODY>
<DIV id=cntR>
<DIV id=NewsTop>
<DIV id=NewsTop_tit>
<P class=topTit>新闻排行</P>
<P class=topC0>国内</P>
<P class=topC0>国际</P>
<P class=topC0>社会</P>
<P class=topC0>网评</P>
</DIV>
<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>
<SPAN><A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR></SPAN>
<SPAN>2 </SPAN>
<SPAN>3</SPAN>
<SPAN>4 </SPAN>
</div>
</DIV>
</DIV>
<!--第二个id不能重复-->
<DIV id=cntR2>
<DIV id=NewsTop2>
<DIV id=NewsTop_tit2>
<P class=topTit>体育栏目</P>
<P class=topC0>国内</P>
<P class=topC0>国际</P>
<P class=topC0>社会</P>
<P class=topC0>网评</P>
</DIV>
<DIV id=NewsTop_cnt2><SPAN title="Don't delete me"></SPAN>
<SPAN><A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR></SPAN>
<SPAN>2 </SPAN>
<SPAN>3</SPAN>
<SPAN>4 </SPAN>
</div>
</DIV>
</DIV>
<SCRIPT>
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p')
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span')
var len=Tags.length
var flag=1//修改默认值
for(i=1i<leni++){
Tags[i].value = i
Tags[i].onmouseover=function(){changeNav(this.value)}
TagsCnt[i].className='undis'
}
Tags[flag].className='topC1'
TagsCnt[flag].className='dis'
function changeNav(v){
Tags[flag].className='topC0'
TagsCnt[flag].className='undis'
flag=v
Tags[v].className='topC1'
TagsCnt[v].className='dis'
}
/*第二个*/
var Tags2=document.getElementById('NewsTop_tit2').getElementsByTagName('p')
var TagsCnt2=document.getElementById('NewsTop_cnt2').getElementsByTagName('span')
var len=Tags2.length
var flag2=1//修改默认值
for(i=1i<leni++){
Tags2[i].value = i
Tags2[i].onmouseover=function(){changeNav2(this.value)}
TagsCnt2[i].className='undis'
}
Tags2[flag2].className='topC1'
TagsCnt2[flag2].className='dis'
function changeNav2(v){
Tags2[flag2].className='topC0'
TagsCnt2[flag2].className='undis'
flag2=v
Tags2[v].className='topC1'
TagsCnt2[v].className='dis'
}
</SCRIPT>
</BODY></HTML>
你可以把它看作像写一般的CSS列表一样，只用增加两三行代码就能完成切换效果。文本定时变动代码
#newslist{
background:#f8f8f8border:1px
solid
silverpadding:1pxheight:20pxline-height:20pxwidth:288px
}
#contain{
font-size:12pxoverflow:hiddenlist-style:nonewidth:288pxheight:20pxmargin:0pxpadding:0
}
#contain
li{
height:22pxline-height:22pxwhite-space:nowrapoverflow:hidden
}
百度，世界最大的中文搜索引擎
CSDN，中国最聚人气的IT技术社区
脚本之家
播放器
function
xx(){
var
container=document.getElementById("contain")
container.appendChild(container.firstChild)
}
setInterval("xx()",2000)
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]
