Javascript+CSS实现Flash动态新闻效果（pp原创）

.pp_portal_imgNew { 
position:absolute; 
}

/* 图片样式 */ 
.pp_portal_imgNew img { 
width:100%; 
height:165px; 
border:0; 
}

/* 文字标题样式 */ 
.pp_portal_imgNew_title { 
text-align:center; 
margin-top:5px; 
}

.pp_portal_imgNew_title a{ 
display:block; 
color:#000; 
text-decoration: none; 
font-size: 14px; 
font-weight: bold; 
text-align:center; 
}

/* 导航提示位置 */ 
.pp_portal_navLink { 
position:absolute; 
display:block; 
right:0px; 
bottom:5px; 
}

/* 导航提示样式(未选择) */ 
.pp_portal_navLink a { 
color:#fff; 
text-align:center; 
text-decoration: none; 
}

.pp_portal_navLink li { 
display:inline; 
text-align:center; 
background-color:#333; 
width:15px; 
margin-left:1px; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20newsNum%20%3D%204%3B%20%0D%0Avar%20nn%20%3D%201%3B%20%0D%0A%0D%0Afunction%20pp_portal_selectPicNew(o)%20%7B%20%0D%0Afor(var%20i%3D1%3B%20i%3C%3DnewsNum%3B%20i%2B%2B)%20%7B%20%0D%0Avar%20newsId%20%3D%20%22id_portal_imgNew%22%20%2B%20i%3B%20%0D%0Aif(o%3D%3Di)%20%7B%20%2F%2F%20%E8%A2%AB%E9%80%89%E4%B8%AD%20%0D%0Adocument.getElementById(newsId).style.display%3D%22block%22%3B%20%0D%0Adocument.getElementById(%22id_portal_navLink%22%2Bi).style.background%3D%22red%22%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Adocument.getElementById(newsId).style.display%3D%22none%22%3B%20%0D%0Adocument.getElementById(%22id_portal_navLink%22%2Bi).style.background%3D%22%23333%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Ann%3Do%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E8%87%AA%E5%8A%A8%E9%80%89%E6%8B%A9%E5%9B%BE%E7%89%87%E6%96%B0%E9%97%BB%20%0D%0Afunction%20pp_portal_changePicNew()%20%0D%0A%7B%20%0D%0Aif(nn%3EnewsNum)%20nn%3D1%20%0D%0A%2F%2Falert(nn)%3B%20%0D%0App_portal_selectPicNew(nn)%3B%20%0D%0Ann%2B%2B%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20pp_portal_picNew_auto()%20%7B%20%0D%0App_portal_picNew_autoTask%20%3D%20setInterval('pp_portal_changePicNew()'%2C%202000)%3B%20%0D%0A%7D%20%0D%0App_portal_picNew_auto()%3B%20%0D%0A%3C%2Fscript%3E">

<div id="id_portal_imgNews" class="pp_portal_imgNews"> 
<div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;"> 
<a href="#" _ewebeditor_ta_href="%23"><img alt="图片新闻一" src="http://files.glzy8.com/upload/20081011185509111.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20081011185509111.jpg"></img></a> 
<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml" _ewebeditor_ta_href="http%3A%2F%2Fsports.sina.com.cn%2Ff1%2F2008-10-11%2F14014001153.shtml">图片新闻一</a></div> 
</div> 
<div id="id_portal_imgNew2" class="pp_portal_imgNew" style="display:none;"> 
<a href="#" _ewebeditor_ta_href="%23"><img alt="图片新闻二" src="http://files.glzy8.com/upload/20081011185509111.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20081011185509111.jpg"></img></a> 
<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml" _ewebeditor_ta_href="http%3A%2F%2Fsports.sina.com.cn%2Ff1%2F2008-10-11%2F14014001153.shtml">图片新闻二</a></div> 
</div> 
<div id="id_portal_imgNew3" class="pp_portal_imgNew" style="display:none;"> 
<a href="#" _ewebeditor_ta_href="%23"><img alt="图片新闻三" src="http://files.glzy8.com/upload/20081011185509111.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20081011185509111.jpg"></img></a> 
<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml" _ewebeditor_ta_href="http%3A%2F%2Fsports.sina.com.cn%2Ff1%2F2008-10-11%2F14014001153.shtml">图片新闻三</a></div> 
</div> 
<div id="id_portal_imgNew4" class="pp_portal_imgNew" style="display:none;"> 
<a href="#" _ewebeditor_ta_href="%23"><img alt="图片新闻四" src="http://files.glzy8.com/upload/20081011185509111.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20081011185509111.jpg"></img></a> 
<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml" _ewebeditor_ta_href="http%3A%2F%2Fsports.sina.com.cn%2Ff1%2F2008-10-11%2F14014001153.shtml">图片新闻四</a></div> 
</div> 
<div id="id_portal_navLinks" class="pp_portal_navLink"> 
<ul> 
<li id="id_portal_navLink1" ><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" onclick="pp_portal_selectPicNew(1)"> 1 </a></li> 
<li id="id_portal_navLink2" ><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" onclick="pp_portal_selectPicNew(2)"> 2 </a></li> 
<li id="id_portal_navLink3" ><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" onclick="pp_portal_selectPicNew(3)"> 3 </a></li> 
<li id="id_portal_navLink4" ><a href="javascript:void(0)s" _ewebeditor_ta_href="javascript%3Avoid(0)s" onclick="pp_portal_selectPicNew(4)"> 4 </a></li> 
</ul> 
</div> 
</div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程