Javascript+CSS实现Flash动态新闻效果

Javascript+CSS实现Flash动态新闻效果

< 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 ="/upload/20081011185509111.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 ="/upload/20081011185509111.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 ="/upload/20081011185509111.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 ="/upload/20081011185509111.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)"  onClick ="pp_portal_selectPicNew(4)" >  4  </ a ></ li >
     </ ul >
   </ div >
</ div >

注意：图片新闻一对应的div为<div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;">，其中id编码与js是联系在一起的，其他三个图片新闻的style为style="display:none;