自定义数据-*类型、css和javascript

全部。我正在为我正在进行的一个项目构建一个全屏幕jQuery库，但遇到了一个小问题

要查看正在发生的事情的演示，请访问

基本上，我使用自定义属性data background为每张幻灯片加载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")+")");
    };
}; 

for（变量i=0；i）；
如果（$slides.eq（i）.attr（“数据背景”）！=null）{
$slides.eq（i）.css（“背景图像”、“url”（+$slides.eq（i）.attr（“数据背景”）+”））；
};
}; 

整个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);

（函数（$）{
函数前缀（el）{
var前缀=[“Webkit”、“Moz”、“O”、“ms”]；
for（var i=0；itotalSlides-1）{
newSlide=0；
}
}否则如果（目标=='prev'）{
newSlide=activeSlide-1；
if（newSlide<0）{
newSlide=totalSlides-1；
};
}否则{
newSlide=目标；
};
动画幻灯片（活动幻灯片、新闻幻灯片）；
};
函数waitForNext（）{
slideTimer=setTimeout（函数（）{
更改幻灯片（“下一页”）；
}，config.slideDur）；
};
对于（变量i=0；i）；
如果（$slides.eq（i）.attr（“数据背景”）！=null）{
$slides.eq（i）.css（“背景图像”、“url”（+$slides.eq（i）.attr（“数据背景”）+”））；
//警报（$slides.eq（i）.attr（“数据背景”）；
};
};
$container.find（'.page'）.bind（'click'，function（））{
var target=$（this.attr（'data-target'）；
clearTimeout（slideTimer）；
改变幻灯片（目标）；
});
var$pagers=$pagerList.find（'.page'）；
$slides.eq（0）.css（'opacity'，1）；
$pagers.eq（0）.addClass（'active'）；
activeSlide=0；
waitForNext（）；
});
}
};
$.fn.easyFader=功能（设置）{
return methods.init.apply（这是参数）；
};
})（jQuery）；

---

提前感谢您查看了gallery.js文件，您有以下在淡入淡出过渡时调用的函数：

cleanUp（）

在此函数中，可以从

$slides

中删除样式属性：

$slides.eq(activeNdx).removeAttr('style');

这也将删除背景图像样式。这样就再也不会发生这种情况了

在删除样式的上述行之后，可能需要包括：

$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).data("background")+")");

---

使用jQuery

.data（）

方法访问“data-*”属性的值，而不是

.attr（）

。也就是说，

$（任意）.data（'background'）

而不是

$（任意）.attr（'data-background'）

。非常感谢。我会改变的！谢谢这正是我想要的。@idealbrandon如果这回答了你的问题，请接受它作为答案（点击左边数字下方的勾号）。谢谢