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

<style type="text/css">

/* 图片新闻大小可以更改此样式 */

.pp_portal_imgNews {

position:relative;

text-align:left;

width:250px;

height:190px;

}

.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>

<script type="text/javascript">

var newsNum = 4;

var nn = 1;

function pp_portal_selectPicNew(o) {

for(var i=1; i<=newsNum; i++) {

var newsId = "id_portal_imgNew" + i;

if(o==i) { // 被选中

document.getElementById(newsId).style.display="block";

document.getElementById("id_portal_navLink"+i).style.background="red";

} else {

document.getElementById(newsId).style.display="none";

document.getElementById("id_portal_navLink"+i).style.background="#333";

}

}

nn=o;

}

// 自动选择图片新闻

function pp_portal_changePicNew()

{

if(nn>newsNum) nn=1

//alert(nn);

pp_portal_selectPicNew(nn);

nn++;

}

function pp_portal_picNew_auto() {

pp_portal_picNew_autoTask = setInterval('pp_portal_changePicNew()', 2000);

}

pp_portal_picNew_auto();

</script>

<div id="id_portal_imgNews" class="pp_portal_imgNews">

<div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;">

<a href="#"><img alt="图片新闻一" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>

<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻一</a></div>

</div>

<div id="id_portal_imgNew2" class="pp_portal_imgNew" style="display:none;">

<a href="#"><img alt="图片新闻二" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>

<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻二</a></div>

</div>

<div id="id_portal_imgNew3" class="pp_portal_imgNew" style="display:none;">

<a href="#"><img alt="图片新闻三" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>

<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻三</a></div>

</div>

<div id="id_portal_imgNew4" class="pp_portal_imgNew" style="display:none;">

<a href="#"><img alt="图片新闻四" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>

<div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻四</a></div>

</div>

<div id="id_portal_navLinks" class="pp_portal_navLink">

<ul>

<li id="id_portal_navLink1" ><a href="javascript:void(0)" onclick="pp_portal_selectPicNew(1)"> 1 </a></li>

<li id="id_portal_navLink2" ><a href="javascript:void(0)" onclick="pp_portal_selectPicNew(2)"> 2 </a></li>

<li id="id_portal_navLink3" ><a href="javascript:void(0)" onclick="pp_portal_selectPicNew(3)"> 3 </a></li>

<li id="id_portal_navLink4" ><a href="javascript:void(0)s" onclick="pp_portal_selectPicNew(4)"> 4 </a></li>

</ul>

</div>

</div>



效果预览