JQuery Navbar背景图像改组问题

Question

我希望Navbar的背景图像可以随机播放设置的不同图像。我让它洗牌但是当图像消失时菜单和我的标识消失，当下一个图像出现时它返回。我的另一个问题是图像不会淡入新图像，但它会变为空白然后显示下一个图像。

问题： 1）菜单和徽标与背景图像一起淡入淡出。 2）更改为下一张图像时背景图像变为空白。

尝试： 1）我尝试在我的var元素上使用.not但没有快乐。我为我的Logo和Menu创建了一个名为.ignore的类。 2）不确定如何解决这个问题，因为我是JQuery的新手。

JQuery代码：

    $(function(){  
    var i =0;
    var images = ['assets/img/storm-ocean-hurricane-florida-beach-coast-travel.jpg','assets/img/arctic_sunset.jpg','assets/img/fallflood.jpg','assets/img/landscape-with-fog-and-chimney-smoke-at-sunset.jpg'];
    var image = $('.navbar').not('.ignore');
    image.css('background-image', 'url(assets/img/storm-ocean-hurricane-florida-beach-coast-travel.jpg)');
    setInterval(function(){  
        image.fadeOut(1000, function () {
            image.css('background-image', 'url(' + images[i] +')');
            image.fadeIn(1000);
        });
        if(i == (images.length - 1)){
            i = 0; 
        } else {
            i++;
        }
    }, 5000);
})

Answer 1

我没有看到您的JS明显错误，但我认为您可以通过在navbar内创建一个仅用于保存背景图片的新HTML元素来解决所有问题，并且位于所有其他元素后面，不会干扰它们。标记只是<div class="navbar__bg"></div>。

这样一个元素的CSS就像：

.navbar {
    position: relative; /* needed to allow your bg element to properly position */
}

.navbar__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

并且您将jQuery的第四行更改为：

var image = $('.navbar__bg');

  

＆＃34;我遇到的另一个问题是图像不会淡入新图像，但会显示空白，然后显示下一张图像。＆＃34;

至于此，你的代码被写入当前完全淡出，更改图像，然后淡入。你是说你想要交叉淡化两个图像以相互融合？这将需要重叠多个元素，因为它们同时淡入和淡出。通过在一个元素上更改background-image无法完成交叉淡入淡出。