javascript - DIV - 备用背景图像

Question

我不想使用 slider 插件，而是想使用 CSS/jquery 来交替 DIV 的背景图像(淡入/淡出或滑动效果)。目前我的代码如下:

HTML

<div class="block backpic">
</div>

CSS

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}


.backpic {
    height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

我应该怎么做才能用第二张图片替换图片 1？非常感谢您的帮助

Answer 1

使用 jQuery 淡出元素，而不是更改它的 background-image 属性，然后再次淡入:

$('.block').fadeOut(300, function(){

  $(this).css('background-image', 'url(path/to/other/image.jpg)')

  $(this).fadeIn(300);

});

如果您想要像幻灯片一样循环播放动画，请使用 JavaScript setInterval 方法让代码在一定的毫秒数后自行重复:

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block').fadeOut(300, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this).fadeIn(300);

  });
}

这是一个 example