轮播图alt作为标题

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; width:391px;border:solid 2px #f07931;}
#play_info{position:absolute;height:24px;width: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;width: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; width: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>   

posted @ 2012-03-22 14:35  有梦就能实现  阅读(421)  评论(0编辑  收藏  举报