图片新闻动态切换

样式布局：
.d1
{
  390px;
 height: auto;
 overflow: hidden;
 border: #666666 2px solid;
 background-color: #000000;
 position: relative;
}
.loading
{
  390px;
 border: #666666 2px solid;
 background-color: #000000;
 color: #FFCC00;
 font-size: 12px;
 height: 230px;
 text-align: center;
 padding-top: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
}
.d2
{
  100%;
 height: 230px;
 overflow: hidden;
}
.num_list
{
 position: absolute;
  100%;
 left: 0px;
 bottom: -1px;
 background-color: #000000;
 color: #FFFFFF;
 font-size: 12px;
 padding: 4px 0px;
 height: 20px;
 overflow: hidden;
}
.num_list span
{
 display: inline-block;
 height: 16px;
 padding-left: 6px;
}
img
{
 border: 0px;
}
#tupian1 ul
{ c
 display: none;
}
.button
{
 position: absolute;
 z-index: 1000;
 right: 0px;
 bottom: 2px;
 font-size: 13px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
}
.b1, .b2
{
 background-color: #666666;
 display: block;
 float: left;
 padding: 2px 6px;
 margin-right: 3px;
 color: #FFFFFF;
 text-decoration: none;
 cursor: pointer;
}
.b2
{
 color: #FFCC33;
 background-color: #FF6633;
}

JS引用：

//主函数
var s = function ()
{
    var interv = 2000; //切换时间
    var interv2 = 10; //切换速速
    var opac1 = 80; //文字背景的透明度
    var source = "fade_focus"; //图片容器的id名称
    //获取对象
    function getTag(tag, obj) { if (obj == null) { return document.getElementsByTagName(tag) } else { return obj.getElementsByTagName(tag) } }
    function getid(id) { return document.getElementById(id) };
    var opac = 0, j = 0, t = 63, num, scton = 0, timer, timer2, timer3; var id = getid(source); id.removeChild(getTag("div", id)[0]); var li = getTag("li", id); var div = document.createElement("div"); var title = document.createElement("div"); var span = document.createElement("span"); var button = document.createElement("div"); button.className = "button"; for (var i = 0; i < li.length; i++) { var a = document.createElement("a"); a.innerHTML = i + 1; a.onclick = function () { clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j = parseInt(this.innerHTML) - 1; scton = 0; t = 63; opac = 0; fadeon(); }; a.className = "b1"; a.onmouseover = function () { this.className = "b2" }; a.onmouseout = function () { this.className = "b1"; sc(j) }; button.appendChild(a); }
    //控制图层透明度
    function alpha(obj, n) { if (document.all) { obj.style.filter = "alpha(opacity=" + n + ")"; } else { obj.style.opacity = (n / 100); } }
    //控制焦点按钮
    function sc(n) { for (var i = 0; i < li.length; i++) { button.childNodes[i].className = "b1" }; button.childNodes[n].className = "b2"; }
    title.className = "num_list"; title.appendChild(span); alpha(title, opac1); id.className = "d1"; div.className = "d2"; id.appendChild(div); id.appendChild(title); id.appendChild(button);
    //渐显
    var fadeon = function () { opac += 5; div.innerHTML = li[j].innerHTML; span.innerHTML = getTag("img", li[j])[0].alt; alpha(div, opac); if (scton == 0) { sc(j); num = -2; scrolltxt(); scton = 1 }; if (opac < 100) { timer = setTimeout(fadeon, interv2) } else { timer2 = setTimeout(fadeout, interv); }; }
    //渐隐
    var fadeout = function () { opac -= 5; div.innerHTML = li[j].innerHTML; alpha(div, opac); if (scton == 0) { num = 2; scrolltxt(); scton = 1 }; if (opac > 0) { timer = setTimeout(fadeout, interv2) } else { if (j < li.length - 1) { j++ } else { j = 0 }; fadeon() }; }
    //滚动文字
    var scrolltxt = function () { t += num; span.style.marginTop = t + "px"; if (num < 0 && t > 3) { timer3 = setTimeout(scrolltxt, interv2) } else if (num > 0 && t < 62) { timer3 = setTimeout(scrolltxt, interv2) } else { scton = 0 } };
    fadeon();
}
//初始化
window.onload=s;

界面显示：

<table width="390" height="230" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <div class="tupian1" id="tupian1">
                                    <div id="fade_focus">
                                        <div class="loading">
                                            <%--Loading...<br />--%>
                                            <img src="images/logings.gif" width="100" height="100" /></div>
                                        <ul>
                                            <li>
                                                <%=mImgUrl%></li>
                                            <li>
                                                <%=mImgUrl1%></li>
                                            <li>
                                                <%=mImgUrl2%></li>
                                        </ul>
                                        <script src="js/yao.js" type="text/javascript"></script>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>

.cs文件：

protected string mImgUrl = "";
    protected string mImgUrl1 = "";
    protected string mImgUrl2 = "";
    protected string mTitleUrl = "";
    protected string mTitleUrl1 = "";
    protected string mTitleUrl2 = "";
    protected void Page_Load(object sender, EventArgs e)
    {

        bindToRepeaterNews();
        DataSet ds = Cms.GetList("100", 3);
        DataTable tb = ds.Tables[0];

        if (tb.Rows.Count >= 1)
        {
            if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
            {
                mImgUrl = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[0]["fRedirectUrl"].ToString(), tb.Rows[0]["fThumbImgUrl"].ToString(), tb.Rows[0]["fTitle"].ToString());
                //mTitleUrl = String.Format("{0}", tb.Rows[0]["fTitle"].ToString());
            }
            else
            {
                mImgUrl = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[0]["fid"].ToString(), tb.Rows[0]["fThumbImgUrl"].ToString(), tb.Rows[0]["fTitle"].ToString());
                //mTitleUrl = String.Format("{0}", tb.Rows[0]["fTitle"].ToString());

            }
            //mImgUrl = "<a>" +   + "</a>";.
        }
        if (tb.Rows.Count >= 2)
        {
            if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
            {
                mImgUrl1 = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[1]["fRedirectUrl"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString(), tb.Rows[1]["fTitle"].ToString());
                //mTitleUrl1 = String.Format("{0}", tb.Rows[1]["fTitle"].ToString());

            }
            else
            {
                mImgUrl1 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[1]["fid"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString(), tb.Rows[1]["fTitle"].ToString());
                //mTitleUrl1 = String.Format("{0}", tb.Rows[1]["fTitle"].ToString());

            }
            //mImgUrl1 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" /></a>", tb.Rows[1]["fid"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString());
        }
        if (tb.Rows.Count >= 3)
        {
            if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
            {
                mImgUrl2 = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\"  alt=\"{2}\"/></a>", tb.Rows[2]["fRedirectUrl"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString(), tb.Rows[2]["fTitle"].ToString());
                //mTitleUrl2 = String.Format("{0}", tb.Rows[2]["fTitle"].ToString());

            }
            else
            {
                mImgUrl2 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[2]["fid"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString(), tb.Rows[2]["fTitle"].ToString());
                //mTitleUrl2 = String.Format("{0}", tb.Rows[2]["fTitle"].ToString());

            }
            //mImgUrl2 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" /></a>", tb.Rows[2]["fid"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString());
        }

 显示效果：