Question

我想给我造成/。一切工作都很出色,但形象表面上看上去,而不是 in。

// JavaScript for the fade carousel
const slides = document.querySelectorAll( .carousel-slide );
let currentSlide = 0;

// Show the first slide initially
slides[currentSlide].style.display =  block ;

function nextSlide() {
  slides[currentSlide].style.display =  none ;
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.display =  block ;
}

// Automatically switch slides every 3 seconds
setInterval(nextSlide, 3000);

.carousel-container {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.carousel-slide {
  display: none;
  width: 100%;
  height: 100%;
}

<div class="carousel-container">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Nurses" alt="Slide 1">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Barbers" alt="Slide 2">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Receptionist" alt="Slide 3">
</div>

Answer 1

公正使用不透明性和过渡。也可以听取<条码>译文。如果你需要更多控制的话。

// JavaScript for the fade carousel
const slides = document.querySelectorAll( .carousel-slide );
let currentSlide = 0;

// Show the first slide initially
slides[currentSlide].style.opacity =  1 ;

function nextSlide() {
  slides[currentSlide].style.opacity =  0 ;
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.opacity =  1 ;
}

// Automatically switch slides every 3 seconds
setInterval(nextSlide, 3000);

.carousel-container {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
  
  width: 100%;
  aspect-ratio: 16/9;
}

.carousel-slide {
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-out;
  opacity: 0;
  
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div class="carousel-container">
  <img class="carousel-slide" src="https://fakeimg.pl/600x400?text=Nurses" alt="Slide 1">
  <img class="carousel-slide" src="https://fakeimg.pl/600x400?text=Barbers" alt="Slide 2">
  <img class="carousel-slide" src="https://fakeimg.pl/600x400?text=Receptionist" alt="Slide 3">
</div>

友情链接