首页>>焦点图>>右侧带透明遮罩效果文字简要的jQuery焦点图代码(2013-10-27)

右侧带透明遮罩效果文字简要的jQuery焦点图代码

 css文件请到演示页面查看源码

右侧带透明遮罩效果文字简要的jQuery焦点图代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="middle">  
  2.     <div class="container_24">  
  3.         <!-- featured list -->  
  4.         <div id="feature_list">  
  5.             <ul id="feature_tabs">  
  6.                 <li><span class="link-title">Beautiful flying people are invading   
  7.                 some corn fields in Lacoste land</span>  
  8.                 <div class="feature_cat">  
  9.                     <a href="http://www.freejs.net/" class="link-more">  
  10.                     Read more</a></div>  
  11.                 </li>  
  12.                 <li><span class="link-title">Learn how to enjoy more the weekend   
  13.                 getaways, togheter with your family</span>  
  14.                 <div class="feature_cat">  
  15.                     <a href="http://www.freejs.net/" class="link-more">  
  16.                     Read more</a></div>  
  17.                 </li>  
  18.                 <li><span class="link-title">php js 演示</span>  
  19.                 <div class="feature_cat">  
  20.                     <a href="http://www.freejs.net/" class="link-more">  
  21.                     Read more</a></div>  
  22.                 </li>  
  23.             </ul>  
  24.             <ul id="feature_output">  
  25.                 <li>  
  26.                 <img src="images/1.jpg" height="325" width="960" class="slider-img" alt="Home" />  
  27.                 <a href="http://www.freejs.net/">  
  28.                 </a></li>  
  29.                 <li>  
  30.                 <img src="images/2.jpg" height="325" width="960" class="slider-img" alt="Home" />  
  31.                 <a href="http://www.freejs.net/">  
  32.                 </a></li>  
  33.                 <li>  
  34.                 <img src="../freejs.jpg" height="325" width="960" class="slider-img" alt="Home" />  
  35.                 <a href="http://www.freejs.net/">  
  36.                 </a></li>  
  37.             </ul>  
  38.         </div>  
  39.     </div>  
  40. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         $.featureList(  
  4.             $("#feature_tabs li"),  
  5.             $("#feature_output li"), {  
  6.                 start_item : 0,  
  7.                 transition_interval: 5000  
  8.             }  
  9.         );  
  10.     });  
  11. </script>  

 

JavaScript Code
  1. /* 
  2.  * FeatureList - simple and easy creation of an interactive "Featured Items" widget 
  3.  * Examples and documentation at: http://jqueryglobe.com/article/feature_list/ 
  4.  * Version: 1.0.0 (01/09/2009) 
  5.  * Copyright (c) 2009 jQueryGlobe 
  6.  * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License 
  7.  * Requires: jQuery v1.3+ 
  8. */  
  9. ;(function($) {  
  10.     $.fn.featureList = function(options) {  
  11.         var tabs    = $(this);  
  12.         var output  = $(options.output);  
  13.   
  14.         new jQuery.featureList(tabs, output, options);  
  15.   
  16.         return this;      
  17.     };  
  18.   
  19.     $.featureList = function(tabs, output, options) {  
  20.         function slide(nr) {  
  21.             if (typeof nr == "undefined") {  
  22.                 nr = visible_item + 1;  
  23.                 nr = nr >= total_items ? 0 : nr;  
  24.             }  
  25.   
  26.             tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');  
  27.   
  28.             output.stop(true, true).filter(":visible").fadeOut();  
  29.             output.filter(":eq(" + nr + ")").fadeIn(function() {  
  30.                 visible_item = nr;    
  31.             });  
  32.         }  
  33.   
  34.         var options         = options || {};   
  35.         var total_items     = tabs.length;  
  36.         var visible_item    = options.start_item || 0;  
  37.   
  38.         options.pause_on_hover      = options.pause_on_hover        || true;  
  39.         options.transition_interval = options.transition_interval   || 5000;  
  40.   
  41.         output.hide().eq( visible_item ).show();  
  42.         tabs.eq( visible_item ).addClass('current');  
  43.   
  44.         tabs.click(function() {  
  45.             if ($(this).hasClass('current')) {  
  46.                 return false;     
  47.             }  
  48.   
  49.             slide( tabs.index( this) );  
  50.         });  
  51.   
  52.         if (options.transition_interval > 0) {  
  53.             var timer = setInterval(function () {  
  54.                 slide();  
  55.             }, options.transition_interval);  
  56.   
  57.             if (options.pause_on_hover) {  
  58.                 tabs.mouseenter(function() {  
  59.                     clearInterval( timer );  
  60.   
  61.                 }).mouseleave(function() {  
  62.                     clearInterval( timer );  
  63.                     timer = setInterval(function () {  
  64.                         slide();  
  65.                     }, options.transition_interval);  
  66.                 });  
  67.             }  
  68.         }  
  69.     };  
  70. })(jQuery);  

 


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