js 相关代码

实现前台背景图片 转换的js代码

var t = n = count = 0;  
 $(function(){  
    count = $("#play_list a").size();
    $("#play_list a:not(:first-child)").hide();  
    $("#play_text li:not(:first-child)").css({"filter":"Alpha(Opacity=50)",'opacity':'0.5'});
    $("#play_text li").click(function() {
        var ti= $(this).find("img").attr("title");
        var i = ti - 1;  
        n = i;  
         if (i >= count) return; 
         $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);  
         $(this).css({"filter":"",'opacity':''}).siblings().css({"filter":"Alpha(Opacity=50)",'opacity':'0.5'});    
     });  
     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');  
 }  

前台的HTML代码：

<div id="play_text">
<ul>
 <li><a href ="#"><img src="../images/index/1.gif"  width="69px" height="50px" title="1" style=" border:0px; display:block;" alt=""/></a>
 </li>
 <li><a href ="#"><img src="../images/index/2.gif"  width="69px" height="50px" title="2" style=" border:0px; display:block;" alt=""/></a>
 </li>
 <li><a href ="#"><img src="../images/index/3.gif"  width="69px" height="50px" title="3" style=" border:0px; display:block;" alt=""/></a>
 </li>
</ul>
</div>
<div id="play_list">
<a href ="#">
 <img src ="../images/index/nav_02.jpg" title ="" style=" border:0px; display:block;"  alt="" />
</a>
<a href ="#">
 <img src ="../images/index/2.jpg" title ="" style=" border:0px; display:block;"  alt="" />
</a>
<a href ="#">
 <img src ="../images/index/3.jpg" title ="" style=" border:0px; display:block;"  alt="" />
</a>
</div>