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

ruoyiqing

2013-11-09

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

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

XML/HTML Code
<div class="middle">  
    <div class="container_24">  
        <!-- featured list -->  
        <div id="feature_list">  
            <ul id="feature_tabs">  
                <li><span class="link-title">Beautiful flying people are invading   
                some corn fields in Lacoste land</span>  
                <div class="feature_cat">  
                    <a href="http://www.freejs.net/" class="link-more">  
                    Read more</a></div>  
                </li>  
                <li><span class="link-title">Learn how to enjoy more the weekend   
                getaways, togheter with your family</span>  
                <div class="feature_cat">  
                    <a href="http://www.freejs.net/" class="link-more">  
                    Read more</a></div>  
                </li>  
                <li><span class="link-title">php js 演示</span>  
                <div class="feature_cat">  
                    <a href="http://www.freejs.net/" class="link-more">  
                    Read more</a></div>  
                </li>  
            </ul>  
            <ul id="feature_output">  
                <li>  
                <img src="images/1.jpg" height="325" width="960" class="slider-img" alt="Home" />  
                <a href="http://www.freejs.net/">  
                </a></li>  
                <li>  
                <img src="images/2.jpg" height="325" width="960" class="slider-img" alt="Home" />  
                <a href="http://www.freejs.net/">  
                </a></li>  
                <li>  
                <img src="../freejs.jpg" height="325" width="960" class="slider-img" alt="Home" />  
                <a href="http://www.freejs.net/">  
                </a></li>  
            </ul>  
        </div>  
    </div>  
</div>  

JavaScript Code
<script type="text/javascript">  
    $(document).ready(function() {  
        $.featureList(  
            $("#feature_tabs li"),  
            $("#feature_output li"), {  
                start_item : 0,  
                transition_interval: 5000  
            }  
        );  
    });  
</script>  

JavaScript Code
/* 
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget 
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/ 
 * Version: 1.0.0 (01/09/2009) 
 * Copyright (c) 2009 jQueryGlobe 
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License 
 * Requires: jQuery v1.3+ 
*/  
;(function($) {  
    $.fn.featureList = function(options) {  
        var tabs    = $(this);  
        var output  = $(options.output);  
  
        new jQuery.featureList(tabs, output, options);  
  
        return this;      
    };  
  
    $.featureList = function(tabs, output, options) {  
        function slide(nr) {  
            if (typeof nr == "undefined") {  
                nr = visible_item + 1;  
                nr = nr >= total_items ? 0 : nr;  
            }  
  
            tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');  
  
            output.stop(true, true).filter(":visible").fadeOut();  
            output.filter(":eq(" + nr + ")").fadeIn(function() {  
                visible_item = nr;    
            });  
        }  
  
        var options         = options || {};   
        var total_items     = tabs.length;  
        var visible_item    = options.start_item || 0;  
  
        options.pause_on_hover      = options.pause_on_hover        || true;  
        options.transition_interval = options.transition_interval   || 5000;  
  
        output.hide().eq( visible_item ).show();  
        tabs.eq( visible_item ).addClass('current');  
  
        tabs.click(function() {  
            if ($(this).hasClass('current')) {  
                return false;     
            }  
  
            slide( tabs.index( this) );  
        });  
  
        if (options.transition_interval > 0) {  
            var timer = setInterval(function () {  
                slide();  
            }, options.transition_interval);  
  
            if (options.pause_on_hover) {  
                tabs.mouseenter(function() {  
                    clearInterval( timer );  
  
                }).mouseleave(function() {  
                    clearInterval( timer );  
                    timer = setInterval(function () {  
                        slide();  
                    }, options.transition_interval);  
                });  
            }  
        }  
    };  
})(jQuery);  