Question

所有。我正在为我正在进行的项目构建一个全屏jQuery画廊，并且正在进行一次小打击。

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

基本上，我使用自定义属性data-background为每张幻灯片加载bg-image。这在第一次工作正常，但是无论何时第二次加载幻灯片，它都不会加载。幻灯片的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);

提前致谢

Answer 1

看了一下你的gallery.js文件，你就有了以下淡入过渡调用的函数：cleanUp()

在此功能中，您可以从$slides：

中删除样式属性

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

这也是删除背景图片样式。然后再从未设置过。

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

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

自定义数据 - *类型，CSS和JavaScript

1 个答案: