ul和li编写的新闻图片展播_ul li 图片展示-CSDN博客

本文链接：https://blog.csdn.net/suifengpiao1989/article/details/7168673

不用flash，用ul 和li编写的新闻图片展播

克服了用focus.swf在IE8下点击新闻图片时，显示窗口不跳转到新的页面

效果图：

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片展播.aspx.cs" Inherits="test_图片展播" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .slidebox
        {
            display: none;
        }
        .slideshow
        {
            clear: both;
        }
        .slideshow li
        {
            position: relative;
            overflow: hidden;
        }
        .slideshow span.title
        {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-bottom: 0;
            width: 100%;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            text-indent: 10px;
        }
        .slideshow span.title, .slidebar li
        {
            background: rgba(0,0,0,0.3);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000);
            color: #FFF;
            overflow: hidden;
        }
        .slidebar li
        {
            float: left;
            margin-right: 1px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 10px;
            cursor: pointer;
        }
        .slidebar li.on
        {
            background: rgba(255,255,255,0.5);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF);
            color: #000;
            font-weight: 700;
        }
        li
        {
            list-style: none;
        }
        img
        {
            border: 0px;
        }
        
        body, ul, ol, li
        {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 100px; width: 100%; background: #ffcc00;">
    </div>
    <div id="portal_block_24_content" style="position: relative;">
        <div class="slidebox" id="123" style="display: block;">
            <ul class="slideshow">
                <li style="width: 275px; height: 180px; display: none;" id="objpic0" οnmοuseοver="stopPlay(0)"
                    οnmοuseοut="goOnPlay()"><a href="<%= dt.Rows[0][0].ToString()%>" target="_blank">
                        <img src="../images/ComBtn.gif" width="275" height="180"></a><span class="title"><%= dt.Rows[0][1].ToString()%></span></li>
                <li style="width: 275px; height: 180px; display: block;" id="objpic1" οnmοusemοve="stopPlay(1)"
                    οnmοuseοut="goOnPlay()"><a href="<%= dt.Rows[1][0].ToString()%>" target="_blank">
                        <img src="../images/bg_title_topb.jpg" width="275" height="180"></a><span class="title"><%= dt.Rows[1][1].ToString()%></span></li></ul>
        </div>
        <div class="slidebar" style="position: absolute; top: 5px; left: 4px;">
            <ul>
                <li id="objnum0" οnmοuseοver="stopPlay(0)" class="on" οnmοuseοut="goOnPlay()">1</li>
                <li οnmοuseοver="stopPlay(1)" id="objnum1" class="" οnmοuseοut="goOnPlay()">2</li></ul>
        </div>
    </div>
    <label id="lblerror">
    </label>
    <script type="text/javascript" language="javascript">
        var i = 0;
        function circlePlay() {
            for (var z = 0; z < 2; z++) {
                document.getElementById("objpic" + z).style.display = "none";
                document.getElementById("objnum" + z).className = "on"; 
            }
            z = i % 2;
            document.getElementById("objpic" + z).style.display = "block";
            document.getElementById("objnum" + z).className = "";
            i++;
            if (i == 2)
            { i = 0; }
        }
        var timebegin = window.setInterval("circlePlay()", 3000);
        function stopPlay(num) {
            window.clearInterval(timebegin);
           
            for (var z = 0; z < 2; z++) {
                document.getElementById("objpic" + z).style.display = "none";
                document.getElementById("objnum" + z).className = "on";
            }
            document.getElementById("objnum" + num).className = "";
            document.getElementById("objpic" + num).style.display = "block";
        }
        function goOnPlay() {
            timebegin = window.setInterval("circlePlay()", 3000);
        }
    </script>
    </form>
</body>
</html>

后台代码：

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Data;
 
 public partial class test_图片展播 : System.Web.UI.Page
 {
     public DataTable dt;
     public string url;
     public string[,] valueUrl = new string[2,2];
     protected void Page_Load(object sender, EventArgs e)
     {
      dt = new DataTable();
      dt.Columns.Add("url");
      dt.Columns.Add("text");
 
         for (int i= 0; i < 2; i++)
         {
             valueUrl[i,0] = "http://www.sohu.com?uid=" + i;
             valueUrl[i,1]="i love you very much"+(i+1);
             dt.Rows.Add(valueUrl);
 
             dt.Rows[i]["url"] = valueUrl[i, 0];
             dt.Rows[i]["text"] = valueUrl[i, 1];
         }
        
     }
 }