首页>>焦点图>>jQuery带缩略图的图片播放插件(2015-01-03)

jQuery带缩略图的图片播放插件

jQuery带缩略图的图片播放插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     var currentImage;  
  3.     var currentIndex = -1;  
  4.     var interval;  
  5.     function showImage(index){  
  6.         if(index < $('#bigPic img').length){  
  7.             var indexImage = $('#bigPic img')[index]  
  8.             if(currentImage){     
  9.                 if(currentImage != indexImage ){  
  10.                     $(currentImage).css('z-index',2);  
  11.                     clearTimeout(myTimer);  
  12.                     $(currentImage).fadeOut(250, function() {  
  13.                         myTimer = setTimeout("showNext()", 3000);  
  14.                         $(this).css({'display':'none','z-index':1})  
  15.                     });  
  16.                 }  
  17.             }  
  18.             $(indexImage).css({'display':'block', 'opacity':1});  
  19.             currentImage = indexImage;  
  20.             currentIndex = index;  
  21.             $('#thumbs li').removeClass('active');  
  22.             $($('#thumbs li')[index]).addClass('active');  
  23.         }  
  24.     }  
  25.       
  26.     function showNext(){  
  27.         var len = $('#bigPic img').length;  
  28.         var next = currentIndex < (len-1) ? currentIndex + 1 : 0;  
  29.         showImage(next);  
  30.     }  
  31.       
  32.     var myTimer;  
  33.       
  34.     $(document).ready(function() {  
  35.         myTimer = setTimeout("showNext()", 3000);  
  36.         showNext(); //loads first image  
  37.         $('#thumbs li').bind('click',function(e){  
  38.             var count = $(this).attr('rel');  
  39.             showImage(parseInt(count)-1);  
  40.         });  
  41.     });  
  42.       
  43.       
  44.     </script>     
XML/HTML Code
  1. <div id='wrapper'>  
  2.           
  3.         <div id='body'>  
  4.             <div id="bigPic">  
  5.                 <img src="imgs/1.jpg" alt="" />  
  6.                 <img src="imgs/2.jpg" alt="" />  
  7.                 <img src="imgs/3.jpg" alt="" />  
  8.                 <img src="imgs/4.jpg" alt="" />  
  9.                 <img src="imgs/5.jpg" alt="" />  
  10.                 <img src="imgs/6.jpg" alt="" />  
  11.                 <img src="imgs/7.jpg" alt="" />  
  12.                 <img src="imgs/8.jpg" alt="" />  
  13.                 <img src="imgs/9.jpg" alt="" />  
  14.                 <img src="imgs/10.jpg" alt="" />  
  15.             </div>  
  16.               
  17.               
  18.             <ul id="thumbs">  
  19.                 <li class='active' rel='1'><img src="imgs/1_thumb.jpg" alt="" /></li>  
  20.                 <li rel='2'><img src="imgs/3_thumb.jpg" alt="" /></li>  
  21.                 <li rel='3'><img src="imgs/4_thumb.jpg" alt="" /></li>  
  22.                 <li rel='4'><img src="imgs/5_thumb.jpg" alt="" /></li>  
  23.                 <li rel='5'><img src="imgs/6_thumb.jpg" alt="" /></li>  
  24.                 <li rel='6'><img src="imgs/7_thumb.jpg" alt="" /></li>  
  25.                 <li rel='7'><img src="imgs/8_thumb.jpg" alt="" /></li>  
  26.                 <li rel='8'><img src="imgs/9_thumb.jpg" alt="" /></li>  
  27.                 <li rel='9'><img src="imgs/10_thumb.jpg" alt="" /></li>  
  28.                 <li rel='10'><img src="imgs/2_thumb.jpg" alt="" /></li>  
  29.             </ul>  
  30.           
  31.         </div>  
  32.   
  33.   
  34.         <div id='push'></div>  
  35.     </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_452.html