从底部滑动第一张图像并过渡淡入第二张

Question

我有一个普通的首页，我希望在顶部有 2 个背景图像交替（在过渡之间淡入淡出）居中。 一切都很好，但是当第一张图片加载时，它会从左边滑动，但我需要 从底部滑动。我该怎么做？ 由于某种原因，仅在 JSFiddle 中出现第一张图像后闪烁，在 localhost 中很好。

<div id="frontpage-carousel">

    <div class="container text-center">
         something something
    </div>

</div>

#frontpage-carousel {
  transition: background 1.5s linear;
  -webkit-transition: background 1.5s linear;
  -moz-transition: background 1.5s linear;
  -o-transition: background 1.5s linear;
  -ms-transition: background 1.5s linear;
}

.first {
  background: #000 url(http://placehold.it/350x420) no-repeat top center;
}

.second {
  background: #000 url(http://placehold.it/350x350) no-repeat top center;
}

这里的JS代码只是周期性的改变div的类

(function($) {
    setTimeout(function (){

     var images = ['first', 'second'];
    var classIndex = -1;

    function changeBackground() {

        // Grab the element
        var main = $("#frontpage-carousel");

        // If this isn't the first time, remove the previous class
        if (classIndex >= 0) {
            main.removeClass(images[classIndex]);
        }

        // Update the index, wrapping around when we reach the end of the array
        classIndex = (classIndex + 1) % images.length;

        // Add the new class
        main.addClass(images[classIndex]);
    }

    changeBackground();
    setInterval(changeBackground, 3000);

}, 1000); 




})(jQuery);

https://jsfiddle.net/uxvjgavt/3/

Answer 1

css： 将此添加到#frontpage-carousel 样式块：

background-position: bottom center;

js: 并将以下内容添加到您的 js 中：

// Add the new class
    main.addClass(images[classIndex]).css({'background-position': 'top center'});