html:
<!--imggalley-->
<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><li>4</li></ul> </div>
<div id="play_list">
<a href="#" target="_blank"><img src="index/images/img1.jpg" title="" alt="天津公共租赁住房政策问答赁住房政策问答" /></a>
<a href="#" target="_blank"><img src="index/images/img2.jpg" title="" alt="本市住房公积金推出新举措积金推出" /></a>
<a href="#" target="_blank"><img src="index/images/img3.jpg" title="" alt="天津公共租赁住房政策问答赁住房政策问答" /></a>
<a href="#" target="_blank"> <img src="index/images/img4.jpg" title="" alt="天津公共租赁住房政策问答赁住房政策问答" /></a>
</div>
</div>
<!--imggalley end-->
css:
#play {height:236px; 391px;border:solid 2px #f07931;}
#play_info{position:absolute;height:24px;391px;z-index:10;position:absolute;margin-top:200px;padding:10px
0 0 10px;color:#fff;cursor:pointer; font-size:14px;}
#play_bg
{position:absolute;height:30px;391px;z-index:9;background-color:#000;margin-top:205px;filter:
Alpha(Opacity=30);opacity:0.3;}
#play_text {position:absolute;z-index:90;margin:210px 0 0 310px;}
#play_text ul {display:block;filter: Alpha(Opacity=80);opacity:0.8;}
#play_text
ul li { padding:0
5px;float:left;background-color:#000;display:block;color:#FFF;font-family:Verdana;text-align:center;margin:1px;cursor:pointer;font-family:"Courier
New";}
#play_list a{height:236px; 391px;position:absolute;display:block;}
js:
<script type="text/javascript">
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');
}
</script>