Question

我制作了这个图片滑块。但我不知道如何让它变得可动画。传入的幻灯片应该淡入，传出的幻灯片应该淡出。如果有人可以帮助我实现这一目标或指出我正确的方向。非常感谢。这是codepen的链接。 https://codepen.io/dev1112/pen/WzKadd

// Set options
let speed = 500;    //fade speed
let auto = true;   //auto slider options
let auto_speed = 2000;  //auto slider speed

let slideImages = document.querySelectorAll('.slides li');

function nextSlide() {
  let activeImage = document.querySelector('.active-image');
  activeImage.classList.remove('active-image');
  activeImage.classList.add('old-active');

  let oldActive = document.querySelector('.old-active');
  if (oldActive === slideImages[slideImages.length - 1]) {
    slideImages[0].classList.add('active-image');
  } else {
    oldActive.nextElementSibling.classList.add('active-image');
  }

  oldActive.classList.remove('old-active');
}

slideImages[0].classList.add('active-image');

if(auto == true) {
    setInterval(nextSlide, auto_speed);
}

Answer 1

将css动画添加到.active-image类。

.slides .active-image {
  display: block;
  opacity: 1;
  animation: fade 3s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  25%,75% { opacity: 1 }
}

<强> 样本

let slideImages = document.querySelectorAll('.slides li');

// Set options
let speed = 500;    //fade speed
let auto = true;   //auto slider options
let auto_speed = 3000;  //auto slider speed

function nextSlide() {
  let activeImage = document.querySelector('.active-image');
  activeImage.classList.remove('active-image');
  activeImage.classList.add('old-active');

  let oldActive = document.querySelector('.old-active');
  if (oldActive === slideImages[slideImages.length - 1]) {
    slideImages[0].classList.add('active-image');
  } else {
    oldActive.nextElementSibling.classList.add('active-image');
  }

  oldActive.classList.remove('old-active');
}

slideImages[0].classList.add('active-image');

if(auto == true) {
    setInterval(nextSlide, auto_speed);
}

body {
  width: 70%;
  margin: 0 auto;
}

.container {
  width: 944px;

}

.slides {
  width: 100%;
  height: 531px;
  overflow: hidden;
}

.slides li {
  display: none;
  list-style: none;
}


.slides li img {
width: 100%;
height: 100%;
}

.slides .active-image {
  display: block;
  opacity: 1;
  animation: fade 3s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  25%,75% { opacity: 1 }
}

<div class="container">
    <ul class="slides">
      <li><img src="https://dl.dropbox.com/s/7ci9i18i8fq6rgd/image1.jpeg" alt="image1"></li>
      <li><img src="https://dl.dropbox.com/s/s809q74ozg4yp4r/image2.jpeg" alt="image2"></li>
      <li><img src="https://dl.dropbox.com/s/10bkh141lpahtyw/image3.jpeg" alt="image3"></li>
      <li><img src="https://dl.dropbox.com/s/6jm242t5rt18r34/image4.jpeg" alt="image4"></li>
    </ul>
</div>

在动画图像滑块方面需要帮助

1 个答案: