推荐订阅源

今天，尝试了一下jquery插件的开发，先看效果图：

就是鼠标点击下面三张缩略图的时候，显示大图和文字。

    $(document).ready(function() {
        $('#slider1').freySlider({
            timeOut: 4000 
        });
    });

仿照s3Dlider插件的写法，呵呵。

送上源代码。

插件源代码下载

/* ------------------------------------------------------------------------
    freySlider
    Developped By: yaoshuguo
------------------------------------------------------------------------- */
(function($){  
    $.fn.freySlider = function(vars) {
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var timeOutFn   = null;
        var items       = $("#slider1Content .slider1Image");
        var itemsSpan   = $("#slider1Content .slider1Image span");
        var its = $(".dbxt img");
        var tid = 0;
        var cid = its.length-1;
                //$(tips).text(cid);
        its.each(function(i) {
            $(its[i]).mouseover(function() {
                    stopSlider();
                    if(i==0){
                    $(items[cid]).hide();
                    $(itemsSpan[cid]).hide();
                }else{
                    $(items[i-1]).hide();
                    $(itemsSpan[i-1]).hide();
                }
                    $(items[i]).show();
                    $(itemsSpan[i]).show();
            });
            $(its[i]).mouseout(function() {
                tip = i;
                autoSlider();
            });
        });
        var autoSlider = function() {
            if(tid==0){
                $(itemsSpan[cid]).hide();
                $(items[cid]).hide();
            }else{
                $(itemsSpan[tid-1]).hide();
                $(items[tid-1]).hide();
            }
            $(items[tid]).show();
            $(itemsSpan[tid]).show();
            tid++;
            if(tid>=cid)tid = 0;
            timeOutFn = setTimeout(autoSlider,timeOut);
        }
                var stopSlider = function() {
            clearTimeout(timeOutFn);
        }
                autoSlider();
    };  
})(jQuery);  

感谢jquery插件s3Slider的作者，正是读了他的代码给了我灵感。