代码之家 › 专栏 › 技术社区 › Snappysites

JS滑块淡入淡出图像,而不是简单的更改

fade slider image html javascript

Snappysites · 技术社区 · 5 年前

我有一个非常简单的图像滑块,因为我努力寻找一个没有增加混乱。。。这一个是响应和工作正常,需要一点时间来加载,因为图像,但这不是太重要。目前的图像只是切换每次,但我试图让他们之间的图像淡出?如果有人有任何帮助,这将是理想的,请保持它相当直截了当,因为我在我的头在这里,我的工作主要与基本的HTML和PHP。

这就是我所拥有的:

.slides {
  width: 100%;
}

.slides-hidden {
  display: none;
}

<script>
  addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();

    function nextSlide() {
      slides[(index++) % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
      setTimeout(nextSlide, 8000);
    }
  });
</script>


<section>
  <img class="slides slides-hidden" src="indexslider/1.png" alt="1">
  <img class="slides slides-hidden" src="indexslider/2.png" alt="2">
  <img class="slides slides-hidden" src="indexslider/3.png" alt="3">
  <img class="slides slides-hidden" src="indexslider/4.png" alt="4">
  <img class="slides slides-hidden" src="indexslider/5.png" alt="5">
</section>

0 回复 | 直到 5 年前

Rachel Gallen 5 年前

这个脚本与您当前拥有的脚本没有太大的不同,而且非常简单。为了实现淡入度,我添加了一个不透明度为0的类(并将当前不透明度设置为1)。不透明度随着css转换而改变(javascript中添加了fade类)。

我已经在javscript中将图像设置为一个数组(这对您的代码是否可行取决于您有多少图像,但我猜因为这是一个简单的示例,所以您只使用了少数图像)。我用了不同大小的占位符图片来演示。

如您所见,javascript非常简短;在阵列中循环并显示每个图像3秒钟(8秒对于演示来说太长了!)

希望你觉得这个有用。

var myImages = [
    'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg',
    'https://cdn.pixabay.com/photo/2020/11/24/12/23/flowering-dogwood-5772385_960_720.jpg',
    'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg',
    'https://cdn.pixabay.com/photo/2014/12/21/07/49/fireworks-574739_960_720.jpg',
    'https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg'
  ],
  curIndex = 0;
imgShow = 3000; /*yours is 8 secs, but for demo purposes, 3 secs is shorter!*/

function playSlides() {
  document.getElementById('slider').className += "fadeOut";
  setTimeout(function() {
    document.getElementById('slider').src = myImages[curIndex];
    document.getElementById('slider').className = "";
  }, 1000);
  curIndex++;
  if (curIndex == myImages.length) {
    curIndex = 0;
  }
  setTimeout(playSlides, imgShow);
}
playSlides();

#slider {
  opacity: 1;
  transition: opacity 1s;
  width: 100%;
  height: auto;
}

#slider.fadeOut {
  opacity: 0;
}

<img id="slider" src="http://placehold.it/200x200">