自定义数据类型，css和javascript

all. 我正在为我正在处理的一个项目构建一个全屏 jQuery 库，并且遇到了一个小问题。

要查看正在发生的事情的演示，请访问 http://www.idealbrandon.com/gallery.html。

基本上，我使用自定义属性数据背景为每张幻灯片加载 bg 图像。 这在第一次通过时工作正常，但是每当第二次加载幻灯片时，它都不会加载。 幻灯片的 HTML 是：

<div class="slide" data-background="/img/gallery/2.jpg">
    <div class="location">Magical Aqua Ducks</div>
    <div class="verse"></div>
</div>

有问题的Javascript是

for(var i = 0; i < totalSlides; i++){
    $pagerList
    .append('<li class="page" data-target="'+i+'"></li>');
        if ($slides.eq(i).attr("data-background") != null){
            $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
    };
}; 

整个JavaScript文件是

(function($){
function prefix(el){
    var prefixes = ["Webkit", "Moz", "O", "ms"];
    for (var i = 0; i < prefixes.length; i++){
        if (prefixes[i] + "Transition" in el.style){
            return '-'+prefixes[i].toLowerCase()+'-'; 
        };
    }; 
    return "transition" in el.style ? "" : false;
};
var methods = {
    init: function(settings){
        return this.each(function(){
            var config = {
                slideDur: 7000,
                fadeDur: 800
            };
            if(settings){
                $.extend(config, settings);
            };
            this.config = config;
            var $container = $(this),
                slideSelector = '.slide',
                fading = false,
                slideTimer,
                activeSlide,
                newSlide,
                $slides = $container.find(slideSelector),
                totalSlides = $slides.length,
                $pagerList = $container.find('.pager_list');
                prefix = prefix($container[0]);
            function animateSlides(activeNdx, newNdx){
                function cleanUp(){
                    $slides.eq(activeNdx).removeAttr('style');
                    activeSlide = newNdx;
                    fading = false;
                    waitForNext();
                };                    
                if(fading || activeNdx == newNdx){
                    return false;
                };
                fading = true;
                $pagers.removeClass('active').eq(newSlide).addClass('active');
                $slides.eq(activeNdx).css('z-index', 3);
                $slides.eq(newNdx).css({
                    'z-index': 2,
                    'opacity': 1
                });
               if(!prefix){
                    $slides.eq(activeNdx).animate({'opacity': 0}, config.fadeDur,
                    function(){
                        cleanUp();
                    });
                } else {
                    var styles = {};
                    styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
                    styles['opacity'] = 0;
                    $slides.eq(activeNdx).css(styles);
                    //$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).attr("data-background")+")");
                    var fadeTimer = setTimeout(function(){
                        cleanUp();
                    },config.fadeDur);
                };
            };
            function changeSlides(target){
                if(target == 'next'){
                    newSlide = (activeSlide * 1) + 1;
                    if(newSlide > totalSlides - 1){
                        newSlide = 0;
                    }
                } else if(target == 'prev'){
                    newSlide = activeSlide - 1;
                    if(newSlide < 0){
                        newSlide = totalSlides - 1;
                    };
                } else {
                    newSlide = target;
                };
                animateSlides(activeSlide, newSlide);
            };
            function waitForNext(){
                slideTimer = setTimeout(function(){
                    changeSlides('next');
                },config.slideDur);
            };
            for(var i = 0; i < totalSlides; i++){
                $pagerList
                    .append('<li class="page" data-target="'+i+'"></li>');
                if ($slides.eq(i).attr("data-background") != null){
                    $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
                    //alert($slides.eq(i).attr("data-background"));
                };
            };
            $container.find('.page').bind('click',function(){
                var target = $(this).attr('data-target');
                clearTimeout(slideTimer);
                changeSlides(target);
            });
            var $pagers = $pagerList.find('.page');
            $slides.eq(0).css('opacity', 1);

            $pagers.eq(0).addClass('active');
            activeSlide = 0;
            waitForNext();
        });
    }
};
$.fn.easyFader = function(settings){
      return methods.init.apply(this, arguments);
};
})(jQuery);

提前致谢