易网时代-编程资源站

编程资源图片资源库蚂蚁家优选

首页 / 脚本样式 / JavaScript / 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> <img alt="图片新闻一" src="http://files.jb51.net/upload/20081011185509111.jpg"></img> 图片新闻一 <img alt="图片新闻二" src="http://files.jb51.net/upload/20081011185509111.jpg"></img> 图片新闻二 <img alt="图片新闻三" src="http://files.jb51.net/upload/20081011185509111.jpg"></img> 图片新闻三 <img alt="图片新闻四" src="http://files.jb51.net/upload/20081011185509111.jpg"></img> 图片新闻四 <ul> <li id="id_portal_navLink1" > 1 </li> <li id="id_portal_navLink2" > 2 </li> <li id="id_portal_navLink3" > 3 </li> <li id="id_portal_navLink4" > 4 </li> </ul>

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

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图