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

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

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

演示

 

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