javascript - 带有url的jQuery幻灯片在图像之间可变淡入淡出

Question

我创建了一个基于 jQuery 的幻灯片，它位于我网页上的一个 DIV 中。唯一的问题是图像之间没有过渡效果，只有一个到下一个，没有第一个慢慢淡出，下一个逐渐淡出。

我想交叉淡入淡出这些图像。我的 JS 中缺少什么？

var urls = ['https://example.com/front.png',
 'https://example.com/interior-scaled.jpeg'];

  var count = 1;
  $('.hero').css('background-image', 'url("' + urls[0] + '")');
  setInterval(function() {
    $('.hero').css('background-image', 'url("' + urls[count] + '")');
    count == urls.length-1 ? count = 0 : count++;
  }, 6000);

});

LINK TO FIDDLE

Answer 1

如果您不反对使用 jQuery 幻灯片库，那么我建议您使用 Ken Wheelers Slick轮播 jQuery 库。

• slick.min.css缩小尺寸 1.4 KB
• slick-theme.min.css缩小后的大小 3.07 KB (仅当您需要 slicks 基本主题样式时才使用)
• slick.min.js缩小后的大小 51.9 KB

在您的第一条评论中，您提到...

even if images slide like a carousel would be sufficient.

嗯Slick使两者的工作变得容易，加上大量其他很酷的选项、事件回调和响应式断点设置。它可能会加快使用您已经在使用的 jQuery 为您的项目创建滑动/淡入淡出轮播的速度。

我在下面的示例中包含了 2 个主要幻灯片，均采用 fade: false 模式。

• #Hero_1 幻灯片在图像加载或未加载之前运行。
• #Hero_2 使用 $(window).on('load') 确保您的图像在幻灯片放映之前已加载

// our hero examples as constant variables
const hero_1 = $('#hero_1');
const hero_2 = $('#hero_2');

// our slide image urls in constant variable array 
const slides = [
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-patient-exam-room.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-interior-scaled.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-front.png'
];

// for each of the slide images as key > url
$.each(slides, function(key, url) {

  // append slide to hero carousel div
  $('.carousel', '.hero').append('<div class="slide" style="background-image:url(\'' + url + '\');"></div>');

});

// the below slick js should not run until the above each function has finished appending images in slides array

// slick hero carousel on init
$('.carousel', hero_1).on('init', function(slick) {

  // add show class to hero div to animate height when slick init
  $(hero_1).addClass('show');

// slick carousel options
}).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  fade: true,
  adaptiveHeight: false,
  autoplay: true,
  infinite: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  autoplaySpeed: 4000,
  speed: 1000,
  draggable: false
});

// use this if you want all background images to load first
// tho may be slow to run depending on how many images and the image size you are loading

$(window).on('load', function() {

  // slick on init
  $('.carousel', hero_2).on('init', function(slick) {

    // add show class to hero div to expand height
    $(hero_2).addClass('show');

  // slick options
  }).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    fade: true,
    adaptiveHeight: false,
    autoplay: true,
    infinite: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    autoplaySpeed: 4000,
    speed: 1000,
    draggable: false
  });

});

.hero {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .75);
  min-height: 0;
  height: 0;
  transition: all 0.5s ease;
  margin: 0 0 .5rem 0;
}

.hero.show {
  min-height: 150px;
  height: 150px;
  /* 
  height:45%;
  height:45vh;
  min-height:400px;
  */
}

.hero .carousel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero .carousel.slick-initialized {
  opacity: 1;
}

.hero .carousel .slick-list,
.hero .carousel .slick-track {
  height: 100% !important;
}

.hero .carousel .slide {
  background-color: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
}

.hero .overlay {
  color: #fff;
  position: relative;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
}


/* for demo styling purposes */

BODY {
  font-family: helvetica;
}

H1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}

P {
  margin: 0 0 .5rem 0;
}

.lead {
  font-size: 1.4rem;
  margin: 0 0 .5rem 0;
}

.row {
  margin: 0 -4px 0 -4px;
}

.col {
  float: left;
  width: calc(50% - 8px);
  padding: 0 4px 0 4px;
}

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

<div class="row">
  <div class="col">

    <p>
      <code><strong>#hero_1</strong><br/></code>
      <code><small>Slick inits after each function is complete.</small></code>
    </p>

    <div id="hero_1" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 1</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
  <div class="col">

    <p>
      <code><strong>#hero_2</strong></code><br/>
      <code><small>Waits for all imgs to load before init slick.</small></code>
    </p>

    <div id="hero_2" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 2</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
</div>

<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>

这是与上面相同的代码，但在 fade: false 模式下...

• #Hero_1 幻灯片在图像加载或未加载之前运行。
• #Hero_2 使用 $(window).on('load') 确保您的图像在幻灯片放映之前已加载

// our hero examples as constant variables
const hero_1 = $('#hero_1');
const hero_2 = $('#hero_2');

// our slide image urls in constant variable array 
const slides = [
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-patient-exam-room.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-interior-scaled.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-front.png'
];

// for each of the slide images as key > url
$.each(slides, function(key, url) {

  // append slide to hero carousel div
  $('.carousel', '.hero').append('<div class="slide" style="background-image:url(\'' + url + '\');"></div>');

});

// the below slick js should not run until the above each function has finished appending images in slides array

// slick hero carousel on init
$('.carousel', hero_1).on('init', function(slick) {

  // add show class to hero div to animate height when slick init
  $(hero_1).addClass('show');

// slick carousel options
}).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  fade: false,
  adaptiveHeight: false,
  autoplay: true,
  infinite: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  autoplaySpeed: 4000,
  speed: 1000,
  draggable: false
});

// use this if you want all background images to load first
// tho may be slow to run depending on how many images and the image size you are loading

$(window).on('load', function() {

  // slick on init
  $('.carousel', hero_2).on('init', function(slick) {

    // add show class to hero div to expand height
    $(hero_2).addClass('show');

  // slick options
  }).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    fade: false,
    adaptiveHeight: false,
    autoplay: true,
    infinite: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    autoplaySpeed: 4000,
    speed: 1000,
    draggable: false
  });

});

.hero {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .75);
  min-height: 0;
  height: 0;
  transition: all 0.5s ease;
  margin: 0 0 .5rem 0;
}

.hero.show {
  min-height: 150px;
  height: 150px;
  /* 
  height:45%;
  height:45vh;
  min-height:400px;
  */
}

.hero .carousel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero .carousel.slick-initialized {
  opacity: 1;
}

.hero .carousel .slick-list,
.hero .carousel .slick-track {
  height: 100% !important;
}

.hero .carousel .slide {
  background-color: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
}

.hero .overlay {
  color: #fff;
  position: relative;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
}


/* for demo styling purposes */

BODY {
  font-family: helvetica;
}

H1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}

P {
  margin: 0 0 .5rem 0;
}

.lead {
  font-size: 1.4rem;
  margin: 0 0 .5rem 0;
}

.row {
  margin: 0 -4px 0 -4px;
}

.col {
  float: left;
  width: calc(50% - 8px);
  padding: 0 4px 0 4px;
}

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

<div class="row">
  <div class="col">

    <p>
      <code><strong>#hero_1</strong><br/></code>
      <code><small>Slick inits after each function is complete.</small></code>
    </p>

    <div id="hero_1" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 1</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
  <div class="col">

    <p>
      <code><strong>#hero_2</strong></code><br/>
      <code><small>Waits for all imgs to load before init slick.</small></code>
    </p>

    <div id="hero_2" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 2</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
</div>

<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>