• 轮播图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; 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>   

  • 相关阅读:
    Alpha冲刺第一天
    团队项目-需求分析
    设计模式第二次作业
    设计模式第一次作业
    冲刺合集
    冲刺NO.12
    项目测试
    冲刺NO.11
    冲刺NO.9
    冲刺NO.10
  • 原文地址:https://www.cnblogs.com/firstdream/p/2411581.html
Copyright © 2020-2023  润新知