如何将 CSS 过渡添加到自动滑块？

Question

我正在尝试为我的自动滑块应用 'opacity / sliding to left'，但我做不到。请帮我解决这个问题。

let images = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg", ];
let i = 0;

function changeImg() {
  document.querySelector("#slider img").src = images[i];
  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  setTimeout("changeImg()", 1000);

}
onload(changeImg());

#slider img {
  width: 100vw;
  height: 60vh;
  transition: opacity 2s ease-out;
}

<section id="slider">
  <img name="slide" width="400" height="200" />
</section>

Answer 1

最初的要求是图像淡出并显示另一个图像。

这可以通过将图像一个放在另一个之上（绝对位置）和不透明度 0 以及在不透明度上设置过渡来实现。当要显示特定图像时，将其设置为不透明度 0 之前的图像，而新图像的不透明度设置为 1.

let images = ["https://picsum.photos/id/1015/300/300", "https://picsum.photos/id/1016/200/300", "https://picsum.photos/id/1018/300/200.jpg", "https://picsum.photos/id/1022/400/300", ];
const slider = document.querySelector('#slider');
const imgEls = [];
images.forEach(image => {
  let imgEl = document.createElement('img');
  imgEl.src = image;
  imgEls.push(imgEl);
  slider.appendChild(imgEl);
});
let i = 0;

function changeImg() {
  imgEls[i].style.opacity = 0;
  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  imgEls[i].style.opacity = 1;
  setTimeout("changeImg()", 1000);
}
window.onload = changeImg;

#slider {
  width: 100vw;
  height: 60vh;
  position: relative;
  isplay: felx;
  justify-content: center;
  align-items: center;
}

#slider img {
  display: inline-block;
  width: 100vw;
  height: 60vh;
  object-fit: contain;
  transition: opacity 2s ease-out;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="slider">
  < name="slide" width="400" height="200" />
</section>

虽然该动作似乎与评论中讨论的内容相对应，但它并没有真正实现 'slider'，而且问题还谈到使用 CSS.[=16 向左滑动=]

此代码片段对问题的代码采用了一种略有不同的方法，因为一旦使用 Javascript 完成了幻灯片的初始设置，其他所有内容都通过 CSS 完成。这样做的好处是系统可以将动画交给 GPU，而无需在超时时中断回主程序。

每个图像都位于左侧 100%（即刚好在屏幕右侧），并且与另一个图像具有相同的动画 - 移动到中心，等待然后移出到左侧 - 不透明度淡入和出来分别。然而，图像在交错的时间开始动画，因此滑动看起来是连续的。

const slider = document.querySelector('#slider');
const images = ["https://picsum.photos/id/1015/300/300", "https://picsum.photos/id/1016/200/300", "https://picsum.photos/id/1018/300/200", "https://picsum.photos/id/1022/400/300"];
let div;
let count = 0;
images.forEach(image => {
  div = document.createElement('div');
  div.style.animationDelay = (count * 2) + 's';
  count++;
  div.style.setProperty('--img', 'url(' + image + ')');
  slider.appendChild(div);
});
slider.style.setProperty('--n', count);

#slider {
  overflow: hidden;
  width: 100vw;
  height: 60vh;
  position: relative;
}

#slider div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--img);
  animation-name: slide;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: calc(var(--n) * 2s);
  animation-fill-mode: forwards;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(100vw);
  }
  12.5% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
  37.5%,
  100% {
    opacity: 0;
    transform: translateX(-100vw);
  }
}

<div id="slider"></div>

请注意，关键帧设置假设有 4 张图像。必须将 % 值更改为更多或更少。不幸的是 CSS 不允许变量作为关键帧中的 % 值，因此 JS 会理想地找到图像的数量并创建正确的关键帧。

如何将 CSS 过渡添加到自动滑块？

How to add CSS transitions to Automatic Slider?

javascript

css

slider