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结构部分): 

XML/HTML代码

 

1. <div id="play">    
2.     <div id="play_bg"></div>  
3.     <div id="play_info"></div>  
4.     <div id="play_text">  
5.         <ul>  
6.             <li>1</li>  
7.             <li>2</li>  
8.             <li>3</li>  
9.             <li>4</li>  
10.             <li>5</li>  
11.             <li>6</li>  
12.             <li>7</li>  
13.             <li>8</li>  
14.             <li>9</li>  
15.         </ul>  
16.     </div>  
17.     <div id="play_list">  
18.     <a href="http://koyoz.com/1.jpg" target="_blank">  
19.         <img src="./imgs/1.jpg" title="" alt="<b>相恋9年</b>尔冬升再婚娶相恋9年女友" />  
20.     </a>  
21.     <a href="http://koyoz.com/2.jpg" target="_blank">  
22.         <img src="./imgs/2.jpg" title="" alt="<b>恋情变贤</b>周海媚公开6年恋情变贤妇" />  
23.     </a>  
24.     <a href="http://koyoz.com/3.jpg" target="_blank">  
25.         <img src="./imgs/3.jpg" title="" alt="<b>为啥这么</b>“熊猫”阿宝为啥这么红？" />  
26.     </a>  
27.     <a href="http://koyoz.com/4.jpg" target="_blank">  
28.         <img src="./imgs/4.jpg" title="" alt="<b>男友被捕</b>安妮-海瑟薇前男友被捕" />  
29.     </a>  
30.     <a href="http://koyoz.com/5.jpg" target="_blank">  
31.         <img src="./imgs/5.jpg" title="" alt="<b>开价一亿</b>天后王菲“复出”开价一亿" />  
32.     </a>  
33.     <a href="http://koyoz.com/6.jpg" target="_blank">  
34.         <img src="./imgs/6.jpg" title="" alt="<b>赞郑伊健</b>阿Sa赞郑伊健“保存”得好" />  
35.     </a>  
36.     <a href="http://koyoz.com/7.jpg" target="_blank">  
37.         <img src="./imgs/7.jpg" title="" alt="<b>死跑龙套</b>北影演员：甘当‘死跑龙套的’" />  
38.     </a>  
39.     <a href="http://koyoz.com/8.jpg" target="_blank">  
40.         <img src="./imgs/8.jpg" title="" alt="<b>潘玮柏死</b>潘玮柏死盯辣妹脱衣解带" />  
41.     </a>  
42.     <a href="http://koyoz.com/9.jpg" target="_blank">  
43.         <img src="./imgs/9.jpg" title="" alt="<b>张曼玉分</b>尔冬升深爱张曼玉分手发呆" />  
44.     </a>  
45.     </div>  
46. </div>  

 

代码片段(JS实现部分):

JavaScript代码

 

1. <script type="text/javascript">   
2. var t = n = count = 0;   
3. $(function(){   
4.     count = $("#play_list a").size();   
5.     $("#play_list a:not(:first-child)").hide();   
6.     $("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));   
7.     $("#play_text li:first-child").css({"background":"#fff",'color':'#000'});   
8.     $("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});   
9.     $("#play_text li").click(function() {   
10.         var i = $(this).text() - 1;   
11.         n = i;   
12.         if (i >= count) return;   
13.         $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));   
14.         $("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})   
15.         $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);   
16.         $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});   
17.     });   
18.     t = setInterval("showAuto()", 2000);   
19.     $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});   
20. })   
21.   
22. function showAuto()   
23. {   
24.     n = n >= (count - 1) ? 0 : n + 1;   
25.     $("#play_text li").eq(n).trigger('click');   
26. }   
27. </script>  

 

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

CSS代码

 

1. <style type="text/css">   
2. *{font-size:12px; font-family:Verdana;margin:0;padding:0}   
3. #play img {border:0px}   
4. #play {width:346px;height:191px;overflow:hidden;margin:50px 0 0 50px;}   
5. #play_info{position:absolute;margin-top:141px;padding:8px 0 0 20px;height:42px;width:270px;color:#fff;z-index:1001;cursor:pointer}   
6. #play_info b{font-size:14px;display:block}   
7. #play_bg {position:absolute;background-color:#000;margin-top:141px;height:50px;width:346px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}   
8. #play_text {position:absolute;margin:141px 0 0 296px;height:50px;width:60px;z-index:1002}   
9. #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;}   
10. #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";}   
11. #play_list a{display:block;width:346px;height:191px;position:absolute;overflow:hidden}   
12. </style>