jQuery 图片切换效果

        最近在网上看到一个jQueryjQuery 图片切换特效,自己也试着做了一下,下面分享给大家.

HTML页面代码
<div id="content">   
    <div id="content_bg"></div> 
    <div id="content_info"></div> 
    <div id="content_text"> 
        <ul> 
            <li>1</li> 
            <li>2</li> 
            <li>3</li> 
            <li>4</li> 
            <li>5</li> 
            <li>6</li> 
            <li>7</li> 
            <li>8</li> 
            <li>9</li> 
        </ul> 
    </div> 
    <div id="content_list"> 
    <a href="http://pecloud.cn/1.jpg" target="_blank"> 
        <img src="./imgs/1.jpg" title="" alt="<b>美景</b>" /> 
    </a> 
    <a href="http://pecloud.cn/2.jpg" target="_blank"> 
        <img src="./imgs/2.jpg" title="" alt="<b>荷花</b>" /> 
    </a> 
    <a href="http://pecloud.cn/3.jpg" target="_blank"> 
        <img src="./imgs/3.jpg" title="" alt="<b>秀色可餐</b>" /> 
    </a> 
    <a href="http://pecloud.cn/4.jpg" target="_blank"> 
        <img src="./imgs/4.jpg" title="" alt="<b>梅花</b>" /> 
    </a> 
    <a href="http://pecloud.cn/5.jpg" target="_blank"> 
        <img src="./imgs/5.jpg" title="" alt="<b>绿竹</b>" /> 
    </a> 
    <a href="http://pecloud.cn/6.jpg" target="_blank"> 
        <img src="./imgs/6.jpg" title="" alt="<b>寒梅</b>" /> 
    </a> 
    <a href="http://pecloud.cn/7.jpg" target="_blank"> 
        <img src="./imgs/7.jpg" title="" alt="<b>秋菊</b>" /> 
    </a> 
    <a href="http://pecloud.cn/8.jpg" target="_blank"> 
        <img src="./imgs/8.jpg" title="" alt="<b>牡丹</b>" /> 
    </a> 
    <a href="http://pecloud.cn/9.jpg" target="_blank"> 
        <img src="./imgs/9.jpg" title="" alt="<b>玫瑰</b>" /> 
    </a> 
    </div> 
</div>  

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()", 3000);  
    $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});  
})  
 
function showAuto()  
{  
    n = n >= (count - 1) ? 0 : n + 1;  
    $("#play_text li").eq(n).trigger('click');  
}

css代码
*{font-size:12px; font-family:Verdana;margin:0;padding:0}  
#play img {border:0px}  
#play {width:346px;height:191px;overflow:hidden;margin:1px 0 0 1px;}  
#play_info{position:absolute;margin-top:249px;padding:8px 0 0 20px;height:42px;width:270px;color:#fff;z-index:1001;cursor:pointer}  
#play_info b{font-size:14px;display:block}  
#play_bg {position:absolute;background-color:#000;margin-top:241px;height:50px;width:470px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}  
#play_text {position:absolute;margin:229px 0 0 396px;height:50px;width:60px;z-index:1002}  
#play_text ul {list-style-type:none; width:200px;height:70px;display:block;padding-top:15px;margin-left:-180px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}  
#play_text ul li {width:20px;height:18px;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:470px;height:288px;position:absolute;overflow:hidden}
如果测试过程中样式有差异,请修改css样式表,如果嫌图片的切换速度哦过快,请在js文件中修改.