jQuery图片切换,轮播效果

用jQuery实现迅雷首页(http://xunlei.com/)FLASH轮换的效果.

先看效果吧: http://www.koyoz.com/demo/html/autoplay_xunlei/play.html

特点:

• 与迅雷首页FLASH动画相似度达到99%
• 不使用FLASH, 完全由javascript实现控制
• 完美的图片渐变过渡效果(为兼容浏览器,未使用IE强大滤镜)
• 完整的控制逻辑,自动轮播,图片不足9张自动跳过,亦支持鼠标手动切换等
• 多浏览器兼容,IE6+,FireFox1.5+,Opera8.5+,Safari暂时未测试,相信问题不大
• HTML与javascript 代码分离,有易于SEO, 代码更清晰, 更容易控制.

 

代码片段(HTML结构部分): 

<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>  
            <li>5</li>  
            <li>6</li>  
            <li>7</li>  
            <li>8</li>  
            <li>9</li>  
        </ul>  
    </div>  
    <div id="play_list">  
    <a href="http://koyoz.com/1.jpg" target="_blank">  
        <img src="./imgs/1.jpg" title="" alt="<b>相恋9年</b>尔冬升再婚娶相恋9年女友" />  
    </a>  
    <a href="http://koyoz.com/2.jpg" target="_blank">  
        <img src="./imgs/2.jpg" title="" alt="<b>恋情变贤</b>周海媚公开6年恋情变贤妇" />  
    </a>  
    <a href="http://koyoz.com/3.jpg" target="_blank">  
        <img src="./imgs/3.jpg" title="" alt="<b>为啥这么</b>“熊猫”阿宝为啥这么红？" />  
    </a>  
    <a href="http://koyoz.com/4.jpg" target="_blank">  
        <img src="./imgs/4.jpg" title="" alt="<b>男友被捕</b>安妮-海瑟薇前男友被捕" />  
    </a>  
    <a href="http://koyoz.com/5.jpg" target="_blank">  
        <img src="./imgs/5.jpg" title="" alt="<b>开价一亿</b>天后王菲“复出”开价一亿" />  
    </a>  
    <a href="http://koyoz.com/6.jpg" target="_blank">  
        <img src="./imgs/6.jpg" title="" alt="<b>赞郑伊健</b>阿Sa赞郑伊健“保存”得好" />  
    </a>  
    <a href="http://koyoz.com/7.jpg" target="_blank">  
        <img src="./imgs/7.jpg" title="" alt="<b>死跑龙套</b>北影演员：甘当‘死跑龙套的’" />  
    </a>  
    <a href="http://koyoz.com/8.jpg" target="_blank">  
        <img src="./imgs/8.jpg" title="" alt="<b>潘玮柏死</b>潘玮柏死盯辣妹脱衣解带" />  
    </a>  
    <a href="http://koyoz.com/9.jpg" target="_blank">  
        <img src="./imgs/9.jpg" title="" alt="<b>张曼玉分</b>尔冬升深爱张曼玉分手发呆" />  
    </a>  
    </div>  
</div>  

代码片段(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>  

代码片段(CSS渲染部分): 

<style type="text/css">   
*{font-size:12px; font-family:Verdana;margin:0;padding:0}   
#play img {border:0px}   
#play {width:346px;height:191px;overflow:hidden;margin:50px 0 0 50px;}   
#play_info{position:absolute;margin-top:141px;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:141px;height:50px;width:346px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}   
#play_text {position:absolute;margin:141px 0 0 296px;height:50px;width:60px;z-index:1002}   
#play_text ul {list-style-type:none; width:60px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}   
#play_text ul li {width:14px;height:14px;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:346px;height:191px;position:absolute;overflow:hidden}   
</style>