更改 html 和 CSS 中的背景颜色

Question

我创建了一个包含图像地址的数组，现在我希望这些图像应该随机选择并非常流畅地显示，而不是突然出现，我希望它应该从数组中随机开始慢慢显示。

Answer 1

将图像添加到 div 并使用 Slick 进行幻灯片放映

var array = ['https://placeimg.com/200/200/any', 'https://picsum.photos/200', 'https://via.placeholder.com/200'];

var images = $();
for(i = 0; i < array.length; i++) {
    images = images.add(`<div style="background-image:url('` + array[i] +`')"></div>`);
}
$('.slideshow').append(images);

var total = $('.slideshow div').length; // get the number of slides
var rand = Math.floor( Math.random() * total ); // random number

$( document ).ready(function() {
  $('.slideshow').slick({
    infinite: true,
    autoplay: true,
    speed: 3000,
    fade: true,
    cssEase: 'linear',
    initialSlide: rand,
    dots: false,
    prevArrow: false,
    nextArrow: false
  });
});

.slideshow .slick-track div {
  height: 200px;
  background-repeat: no-repeat; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>

<div class="slideshow">
</div>

更改 html 和 CSS 中的背景颜色

Changing background Color in html and CSS

html

javascript

css

setinterval