不用flash，用ul 和li编写的新闻图片展播
克服了用focus.swf在IE8下点击新闻图片时，显示窗口不跳转到新的页面
前台代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片展播.aspx.cs" Inherits="test_图片展播" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 <style type="text/css">
8 .slidebox
9 {
10 display: none;
11 }
12 .slideshow
13 {
14 clear: both;
15 }
16 .slideshow li
17 {
18 position: relative;
19 overflow: hidden;
20 }
21 .slideshow span.title
22 {
23 position: absolute;
24 bottom: 0;
25 left: 0;
26 margin-bottom: 0;
27 width: 100%;
28 height: 32px;
29 line-height: 32px;
30 font-size: 14px;
31 text-indent: 10px;
32 }
33 .slideshow span.title, .slidebar li
34 {
35 background: rgba(0,0,0,0.3);
36 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000);
37 color: #FFF;
38 overflow: hidden;
39 }
40 .slidebar li
41 {
42 float: left;
43 margin-right: 1px;
44 width: 20px;
45 height: 20px;
46 line-height: 20px;
47 text-align: center;
48 font-size: 10px;
49 cursor: pointer;
50 }
51 .slidebar li.on
52 {
53 background: rgba(255,255,255,0.5);
54 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF);
55 color: #000;
56 font-weight: 700;
57 }
58 li
59 {
60 list-style: none;
61 }
62 img
63 {
64 border: 0px;
65 }
66
67 body, ul, ol, li
68 {
69 margin: 0;
70 padding: 0;
71 }
72 </style>
73 </head>
74 <body>
75 <form id="form1" runat="server">
76 <div >
77 </div>
78 <div id="portal_block_24_content" >
79 <div class="slidebox" id="123" >
80 <ul class="slideshow">
81 <li id="objpic0" onmouseover="stopPlay(this,0)"
82 onmouseout="goOnPlay()"><a href="<%= dt.Rows[0][0].ToString()%>" target="_blank">
83 <img src="../images/ComBtn.gif" width="275" height="180"></a><span class="title"><%= dt.Rows[0][1].ToString()%></span></li>
84 <li id="objpic1" onmousemove="stopPlay(this,1)"
85 onmouseout="goOnPlay()"><a href="<%= dt.Rows[1][0].ToString()%>" target="_blank">
86 <img src="../images/bg_title_topb.jpg" width="275" height="180"></a><span class="title"><%= dt.Rows[1][1].ToString()%></span></li></ul>
87 </div>
88 <div class="slidebar" >
89 <ul>
90 <li id="objnum0" onmouseover="stopPlay(this,0)" class="on" onmouseout="goOnPlay()">1</li>
91 <li onmouseover="stopPlay(this,1)" id="objnum1" class="" onmouseout="goOnPlay()">2</li></ul>
92 </div>
93 </div>
94 <label id="lblerror">
95 </label>
96 <script type="text/javascript" language="javascript">
97 var i = 2;
98 var j = 1;
99
100 function circlePlay() {
101 j = i % 2;
102 document.getElementById("objpic" + j).style.display = "block";
103 document.getElementById("objnum" + j).className = "";
104 i++;
105 j = i % 2;
106 document.getElementById("objpic" + j).style.display = "none";
107 document.getElementById("objnum" + j).className = "on";
108 }
109 var timebegin = window.setInterval("circlePlay()", 3000);
110 function stopPlay(obj, num) {
111 window.clearInterval(timebegin);
112 var othernum = (num + 1) % 2;
113 document.getElementById("objnum" + num).className = "";
114 document.getElementById("objnum" + othernum).className = "on";
115 document.getElementById("objpic" + othernum).style.display = "none";
116 document.getElementById("objpic" + num).style.display = "block";
117 }
118 function goOnPlay() {
119 timebegin = window.setInterval("circlePlay()", 3000);
120 }
121 </script>
122 </form>
123 </body>
124 </html>
125
126
后台c#代码
View Code
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Data;
8
9 public partial class test_图片展播 : System.Web.UI.Page
10 {
11 public DataTable dt;
12 public string url;
13 public string[,] valueUrl = new string[2,2];
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 dt = new DataTable();
17 dt.Columns.Add("url");
18 dt.Columns.Add("text");
19
20 for (int i= 0; i < 2; i++)
21 {
22 valueUrl[i,0] = "http://www.sohu.com?uid=" + i;
23 valueUrl[i,1]="i love you very much"+(i+1);
24 dt.Rows.Add(valueUrl);
25
26 dt.Rows[i]["url"] = valueUrl[i, 0];
27 dt.Rows[i]["text"] = valueUrl[i, 1];
28 }
29
30 }
31 }
效果：
