欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

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

时间：2021-04-10 08:52:14|栏目：JavaScript代码|点击：次

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

上一篇：js带按钮的提示框可供选择示例代码

栏目：JavaScript代码

下一篇：移动端点击图片放大特效PhotoSwipe.js插件实现

本文标题：Javascript+CSS实现Flash动态新闻效果（pp原创）

本文地址：http://www.codeinn.net/misctech/98361.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有