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

更新时间：2008年10月11日 18:55:10 作者：

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="/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)s" onclick="pp_portal_selectPicNew(4)"> 4 </a></li> </ul> </div> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

相关文章

点图片上一页下一页翻页效果
实现图片翻页效果实例代码
2008-07-07
新页面打开实际尺寸的图片
新页面打开实际尺寸的图片...
2006-08-08
js放大镜放大图片效果
非常漂亮的js放大镜效果代码，对于浏览图片效果应该不错哦
2008-05-05
奇妙的Javascript图片放大镜
奇妙的Javascript图片放大镜...
2006-07-07
比较不错的一款图片广告效果
比较不错的一款图片广告效果...
2007-06-06
兼容ie、firefox的图片自动缩放的css跟js代码分享
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下
2012-01-01
北京奥运官方网站幻灯切换效果flash版打包下载
2008-01-01
点击变化图象不错
点击变化图象不错...
2006-08-08
鼠标滑上去后图片放大浮出效果的js代码
用javascript做了一个鼠标滑上去后图片放大浮出的效果，大家指正一下。
2011-05-05
js 图片缩放特效代码
非常不错nipic使用的图片缩放实现代码。
2009-05-05

最新评论