Question

我有一个普通的首页，我希望在顶部有2个背景图像交替（渐变之间淡出）在中间。这一切都很好但是当第一张图片加载时它将从左侧滑动，但我需要从底部滑动。我该怎么做？由于某种原因，在第一张图像出现之后才会出现闪烁，因为在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'});

从底部滑动第一张图像并将淡入淡出过渡到秒

1 个答案: