随笔 - 147  文章 - 71  trackbacks - 0
<2011年11月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

我的其它Blog：
www.cppblog.com/dreamangel/
blog.csdn.net/fjnu_angel/

常用链接

留言簿(1)

随笔分类(146)

随笔档案(147)

文章分类(28)

文章档案(28)

喜欢的Blog

搜索

  •  

最新评论

阅读排行榜

评论排行榜

Javascript+CSS实现Flash动态新闻效果
<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)" onClick="pp_portal_selectPicNew(4)"> 4 </a></li>
    </ul>
  </div>
</div>

注意：图片新闻一对应的div为<div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;">，其中id编码与js是联系在一起的，其他三个图片新闻的style为style="display:none;

posted on 2011-11-03 20:43 飞翔天使 阅读(423) 评论(0)  编辑  收藏 所属分类: javascript

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 飞翔天使 Powered by: 博客园 模板提供：沪江博客