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

2. <style type="text/css">
3. /* 图片新闻大小可以更改此样式 */
4. .pp_portal_imgNews {
5.     position:relative;
6.     text-align:left;
7.     width:250px;
8.     height:190px;   
9. }
11. .pp_portal_imgNew {
12.     position:absolute;
13. }
15. /* 图片样式 */
16. .pp_portal_imgNew img {
17.     width:100%;
18.     height:165px;
19.     border:0;
20. }
22. /* 文字标题样式 */
23. .pp_portal_imgNew_title {   
24.     text-align:center;
25.     margin-top:5px;
26. }
28. .pp_portal_imgNew_title a{
29.     display:block;
30.     color:#000;
31.     text-decoration: none;
32.     font-size: 14px;
33.     font-weight: bold;
34.     text-align:center;
35. }
37. /* 导航提示位置 */
38. .pp_portal_navLink {
39.     position:absolute;
40.     display:block;  
41.     right:0px;
42.     bottom:5px; 
43. }
45. /* 导航提示样式(未选择) */
46. .pp_portal_navLink a {
47.     color:#fff;
48.     text-align:center;
49.     text-decoration: none;      
50. }
52. .pp_portal_navLink li {
53.     display:inline;  
54.     text-align:center;          
55.     background-color:#333;
56.     width:15px;
57.     margin-left:1px;
58. }
59. </style>
60. <script type="text/javascript">
61. var newsNum = 4; 
62. var nn = 1;
64. function pp_portal_selectPicNew(o) {
65.     for(var i=1; i<=newsNum; i++) {
66.         var newsId = "id_portal_imgNew" + i;        
67.         if(o==i) {   // 被选中     
68.             document.getElementById(newsId).style.display="block";
69.             document.getElementById("id_portal_navLink"+i).style.background="red";
70.         } else {            
71.             document.getElementById(newsId).style.display="none";
72.             document.getElementById("id_portal_navLink"+i).style.background="#333";
73.         }
74.     }
75.     nn=o;   
76. }
78. // 自动选择图片新闻
79. function pp_portal_changePicNew()
80. {
81.     if(nn>newsNum) nn=1
82.     //alert(nn);
83.     pp_portal_selectPicNew(nn); 
84.     nn++;
85. }
87. function pp_portal_picNew_auto() {
88.     pp_portal_picNew_autoTask = setInterval('pp_portal_changePicNew()', 2000);
89. }
90. pp_portal_picNew_auto();
91. </script>
93. <div id="id_portal_imgNews" class="pp_portal_imgNews">
94.     <div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;">
95.         <a href="#"><img alt="图片新闻一" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>
96.         <div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻一</a></div>
97.     </div>
98.     <div id="id_portal_imgNew2" class="pp_portal_imgNew" style="display:none;">
99.         <a href="#"><img alt="图片新闻二" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>
100.         <div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻二</a></div>
101.     </div>  
102.     <div id="id_portal_imgNew3" class="pp_portal_imgNew" style="display:none;">
103.         <a href="#"><img alt="图片新闻三" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>
104.         <div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻三</a></div>
105.     </div>      
106.     <div id="id_portal_imgNew4" class="pp_portal_imgNew" style="display:none;">
107.         <a href="#"><img alt="图片新闻四" src="http://i3.sinaimg.cn/ty/f1/2008-10-11/U1166P6T12D4001153F1286DT20081011142406.jpg"></img></a>
108.         <div class="pp_portal_imgNew_title"><a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml">图片新闻四</a></div>
109.     </div>  
110.     <div id="id_portal_navLinks" class="pp_portal_navLink">
111.         <ul>
112.             <li id="id_portal_navLink1" ><a href="javascript:void(0)" οnclick="pp_portal_selectPicNew(1)">  1  </a></li>
113.             <li id="id_portal_navLink2" ><a href="javascript:void(0)" οnclick="pp_portal_selectPicNew(2)">  2  </a></li>
114.             <li id="id_portal_navLink3" ><a href="javascript:void(0)" οnclick="pp_portal_selectPicNew(3)">  3  </a></li>
115.             <li id="id_portal_navLink4" ><a href="javascript:void(0)s" οnclick="pp_portal_selectPicNew(4)">  4  </a></li>
116.         </ul>   
117.     </div>
118. </div>

 

效果预览