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需再刷新一下页面才能执行]

您可能感兴趣的文章:

相关文章

ImageFlow可鼠标控制图片滚动
大家以前看到的都是FLASH，现在看看JS也来做。提示：支持键盘左右键。拉条可以快速浏览。
2008-01-01
非常不错的javascript 图片慢慢下层效果
非常不错的javascript 图片慢慢下层效果...
2007-08-08
仿搜狐女人频道FLASH图片切换效果
大家在使用过程中，可以参考本站的其它一些特效。
2008-12-12
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。...
2007-03-03
一个简单的javascript图片放大效果代码
javascript图片放大效果多用于小图片产品的展示。
2010-08-08
javascript 动态调整图片尺寸实现代码
在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
2009-12-12
北京奥运官方网站幻灯切换效果flash版打包下载
2008-01-01
完全用CSS实现鼠标移动到图片并更换图片
CSS实现鼠标移动到图片，更换图片，这是一个完全用CSS实现的效果,由此我们可以制作一些效果复杂的按钮，比如换色按钮
2012-12-12
js点小图显示大图的切换功能代码
有时候做一些图片类型的信息，需要这个功能，好多朋友也问我要过类似的代码
2008-09-09
用new Image()预先加载图片真的有用吗？
用new Image()预先加载图片真的有用吗？...
2007-09-09

最新评论