javascript - 从底部滑动第一张图片并淡入第二张图片

Question

我有一个普通的首页，我想在顶部中心交替显示 2 张背景图像(过渡之间淡入淡出)。一切都很好，但是当加载第一张图片时，它会从左侧滑动，但我需要将其从底部滑动。我该怎么做？由于某种原因，第一张图片后的闪烁仅发生在 JSFiddle 中，在本地主机中没有问题。

<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 样式 block :

background-position: bottom center;

js: 以及您的 js 中的以下内容:

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