Question

我有一个网站，我想在后台非常顺利地在图像之间切换。这是我的实际javaScript代码：

var bg=[
        'images/best.jpg',
        'images/61182.jpg',
        'images/bg.jpg'
       ];

   $('._container-1').css('background-image','url('+bg[2]+')');


window.setInterval(
    function(){
        img=bg.shift();bg.push(img);
        document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
    },
    10000
);

现在，我想非常缓慢地改变图像。我已经尝试了很多jQuery-fadeIn / fadeOut-methods这样的方法：

window.setInterval(
        function(){
            img=bg.shift();
            bg.push(img);

        $('._container-1').fadeOut(600, function() {
            $('._container-1').css('background-image','url('+img+')');
            $('._container-1').fadeIn(600);
        });

    },
    17000
);

问题是，容器中有按钮和文本，它们随图像而变化。我希望文本和按钮始终在前面，只有背景应该是fadeIn / fadeOut。我的英语不完美，我希望你理解我的问题。

是的，有人能帮帮我吗？

nina_berlini

Answer 1

我使用2个元素作为背景来实现效果。另请查看https://jsfiddle.net/n380u3cy/1/

上的演示

HTML：

<div class="container">
  <div class="background"></div>
  <div class="background"></div>
  <button>
    Test button
  </button>
</div>

CSS：

.container { position: relative; line-height: 100px; }
  .container > .background,
  .container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }

  .container > *:not(.background) { position: relative; z-index: 1; }

使用Javascript：

var bg=[
          'images/best.jpg',
          'images/61182.jpg',
          'images/bg.jpg'
       ];
var Transition = 1000;

$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
  function() {
    img=bg.shift();
    bg.push(img);

    var $Backgrounds = $('.background');
        $Backgrounds.eq(1).hide(0).css({
        'background-image': 'url('+img+')'
    }).fadeIn(Transition * .9);

    $Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
        $(this).show(0).css({
        'background-image': 'url('+img+')'
      });
      $Backgrounds.eq(1).hide(0);
    });
  }, 2000
);

Answer 2

创建一个包装器，并在其中包含background div和button div，其中包含position absolute和以下CSS样式。这样，您可以从按钮中单独控制背景和动画。

＆＃13;

var bg = [
  'https://placehold.it/1001x201',
  'https://placehold.it/1002x202',
  'https://placehold.it/1003x203'
];

$('._container-1').css('background-image', 'url(' + bg[2] + ')');

window.setInterval(
  function() {
    img = bg.shift();
    bg.push(img);
    document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
  },
  10000
);

window.setInterval(
  function() {
    img = bg.shift();
    bg.push(img);

    $('._container-1').fadeOut(600, function() {
      $('._container-1').css('background-image', 'url(' + img + ')');
      $('._container-1').fadeIn(600);
    });

  },
  17000
);

＆＃13;

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}
._container-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: top center;
}
.buttons {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}
button {
  background: red;
  padding: 5px 10px;
  border: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="_container-1"></div>
  <div class="buttons">
    <button type="button">
      Button 1
    </button>
    <button type="button">
      Button 2
    </button>
  </div>
</div>

＆＃13;

Answer 3

谢谢你的出色解决方案。我对jQuery不是很熟悉，对你的代码有疑问：

  $Backgrounds.eq(1).hide(0).css({
    'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);

意味着第二个“background-div”首先隐藏，然后获得一个新的背景图像，之后它就会淡出？并且意味着隐藏（0）它立即隐藏？

nina_berlini

只更改背景图像，没有前面的文字

3 个答案: