我利用网上代码开发的JQuery图片插件

我利用网上代码开发的JQuery图片插件

 

代码如下

(function($){
    $.fn.FocusPic = function(options){

        var defaults = {
            intervalTime:1000,//切换时间
            divElement:".FocusPic",//div元素
            imgElement:".imgList",//图片元素
            numElement:".countNum",//数字索引按钮元素
            titleElement:".titleList",//标题文字元素
            currentClass:"current"//当前数字样式
        }

        var options = $.extend(defaults, options);

        var imgEle = options.divElement+" " + options.imgElement;
        var numEle = options.divElement+" " + options.numElement;
        var titleEle = options.divElement+" " + options.titleElement;
        var count = $(imgEle+">li").length;
        var index=0;

        /* 如果按钮元素不存在则添加按钮元素 */
        if($(numEle).length==0)
        {
            createElement(options.numElement);
        }
        for(var i=0;i<count;i++)
        {
            $(numEle).append("<li>"+(i+1)+"</li>");
        }

        /* 如果标题元素不存在则添加元素 */
        if($(titleEle).length==0)
        {
            createElement(options.titleElement);
        }
        for(var i=0;i<count;i++)
        {
            var a = $($(imgEle+" li")[i]).find("a");
            if(a.length>0)
            {
                var link = "<a target='_blank' href='"+$(a).attr("href")+"' >"+ $(a).attr("title")+"</a>";
                $(titleEle).append("<li>"+link+"</li>");
            }
            else
            {
                $(titleEle).append("<li> </li>");
            }
        }

        /* 开始时显示第一个图片 */
        //$($(imgEle+" li")[index]).css("display","list-item");
        //$($(imgEle+" li")[index]).fadeIn(100);
        $($(imgEle+" li")[index]).show();
        $($(numEle+" li")[index]).addClass(options.currentClass);
        $($(titleEle+" li")[index]).show();
        index++;

        $(numEle+" li").click(function(){
            var ind = $(numEle+" li").index($(this));
            index =ind;
            imgShow(ind);
        });

        var playing = setInterval(autoShow,options.intervalTime);

        $(options.divElement).mouseover(function()
        {
            clearInterval(playing);
        });

        $(options.divElement).mouseout(function()
        {
            playing = setInterval(autoShow,options.intervalTime);
        });

        function createElement(e)
        {
            if( e.substring(0,1)=='.')
                $(options.divElement).append("<ul class='"+  e.replace('.','') +"'></ul");
            else if( e.substring(0,1)=='#')
                $(options.divElement).append("<ul id='"+  e.replace('.','#') +"'></ul");
            else
                $(options.divElement).append("<ul class='"+  e +"'></ul");
        }
        function autoShow()
        {
            imgShow(index);
            index++;
            if(index>=count) index=0;
        }
        /* 显示第ind个图片 */
        function imgShow(ind)
        {
            $(imgEle+" li").fadeOut(1000);
            $($(imgEle+" li")[ind]).fadeIn(1000);

            $(numEle+" li").removeClass(options.currentClass);
            $($(numEle+" li")[ind]).addClass(options.currentClass);

            $(titleEle+" li").hide();
            $($(titleEle+" li")[ind]).show();
        }
    };

})(jQuery);