Code
<style type="text/css">
*{font-size:12px; font-family:Verdana;margin:0;padding:0}
#play{border:1px solid #ccc;padding:1px;}
#play img {border:0px}
#play {width:200px;height:191px;overflow:hidden;margin:0px 0px 0px 10px;}
#play_info{position:absolute;margin-top:141px;padding:15px 0 0 10px;height:42px;width:200px;color:#fff;z-index:1001;cursor:pointer}
#play_info b{font-size:14px;display:block}
#play_bg {position:absolute;background-color:#000;margin-top:141px;height:50px;width:200px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
#play_text {position:absolute;margin:141px 0 0 150px;height:50px;width:60px;z-index:1002}
#play_text ul {list-style-type:none; width:60px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}
#play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"Courier New";}
#play_list a{display:block;width:200px;height:191px;position:absolute;overflow:hidden}
#tipLayer{position:absolute;right:0px;bottom:0px;height:100px;width:230px;z-index:100;}
</style>
<table>
<tr>
<td>
<div id="play">
<div id="play_bg">
</div>
<div id="play_info">
</div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="play_list">
<asp:Repeater ID="RptNewsPic" runat="server">
<ItemTemplate>
<a href="#" onclick="WinOpenNews('<%#Eval("NewId") %>')">
<img src="<%#Eval("NewPicSrc") %>" title="" alt='<b><%#Eval("NewTitle")%>' />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</td>
<td valign="top" style="padding-left: 5px;">
<ul style="list-style: none;">
<asp:Repeater ID="RptNewsList" runat="server">
<ItemTemplate>
<li style="border-bottom: #ccc 1px dotted; padding: 5px;">
<span style="float: left;">
<img src='Media/Img/bdian.gif' alt="" />
<a href="#" onclick="WinOpenNews('<%#Eval("NewId") %>')"title='<%#Eval("NewTitle")%>' style='padding-left: 9px;'>
<%#Eval("NewTitle").ToString().Length > 17 ? Eval("NewTitle").ToString().Substring(0, 17) : Eval("NewTitle").ToString()%>
</a>
</span>
<span style="float: right; color:Red;">
【<%#Eval("NewAddDate") %>】
</span>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</td>
</tr>
</table>
Code
var t = n = count = 0;
$(function(){
count = $("#play_list a").size();
$("#play_list a:not(:first-child)").hide();
$("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
$("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
$("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
$("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})
$("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
});
t = setInterval("showAuto()", 2000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : n + 1;
$("#play_text li").eq(n).trigger('click');
}
