页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容 Flash动态新闻效果

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

.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_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 全选提示:你可先修改部分代码,再按运行]

Tags：Javascript CSS Flash 动态新闻

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript图片自动缩放和垂直居中处理函数
下一篇文章：javascript 随意拖动的小方块特效

·在百度中搜索关于“Javascript+CSS实现Flash动态新闻效果（pp原创）相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行