如何向我的幻灯片添加滚动动画？

Question

我制作了一个非常基本的 HTML/CSS/JS 幻灯片。当我点击右边的按钮时，幻灯片切换到下一张幻灯片，当我点击左边的按钮时，幻灯片切换到上一张幻灯片。

不过，我想添加一个滚动动画，让幻灯片感觉不那么死板；当我按下右边的按钮时，我希望幻灯片从右边滑入 'slide'，而当我按下左边的按钮时，我希望它从左边滑入。

我一直在研究执行此操作的可能方法并遇到了 CSS 动画，特别是 w3.css 框架 (https://www.w3schools.com/w3css/w3css_animate.asp)，但不确定我将如何实现它考虑到我的幻灯片已经使用类在幻灯片之间切换。

这是我的代码：

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() {
  if (index == (content.length - 1)) {
    index = 0
  } else {
    index = index + 1
  }

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];
}

function back() {
  if (index == 0) {
    index = (content.length - 1)
  } else {
    index = index - 1
  }

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];
}

.slideshow {
  position: relative;
  height: 170px;
  color: white;
  background-color: blue;
}

.slideshow p {
  position: absolute;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.slideshow button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
}

<!DOCTYPE html>
<html lang="en">

<body>

  <div class="slideshow" id="slideshow">
    <p id="slide">Slide 1</p>
    <button onclick="back()" style="left: 0">&#10094;</button>
    <button onclick="next()" style="right: 0">&#10095;</button>
  </div>

</body>

</html>

提前致谢。

Answer 1

您可以使用 CSS 设置下一个和上一个类的样式，然后像这个片段一样用 js 切换它们

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() {
    const slide = document.getElementById("slide");
    if (index == (content.length - 1)) {
        index = 0;
    } else {
        index = index + 1;
    }

    // wipe out class
    slide.className = '';
    // add next class
    setTimeout(() => slide.classList.add('next'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];
}

function back() {
    const slide = document.getElementById("slide");
    if (index == 0) {
        index = (content.length - 1);
    } else {
        index = index - 1;
    }

    // wipe out class
    slide.className = '';
    // add prev class
    setTimeout(() => slide.classList.add('prev'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];
}

.slideshow {
    position: relative;
    height: 170px;
    color: white;
    overflow: hidden;
}

.slideshow p {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 170px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background-color: blue;

}

.slideshow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
}

.prev {
    animation: prev 1s ease-in-out forwards;
}

.next {
    animation: next 1s ease-in-out forwards;
}

@keyframes prev {
    from {
        left: -150%;
    }

    to {
        left: 50%;
    }
}

@keyframes next {
    from {
        right: -150%;
    }

    to {
        right: -50%;
    }
}

    <div class="slideshow" id="slideshow">
        <p id="slide" class="next">Slide 1</p>
        <button onclick="back()" style="left: 0">&#10094;</button>
        <button onclick="next()" style="right: 0">&#10095;</button>
    </div>

如何向我的幻灯片添加滚动动画？

How do I add a scrolling animation to my slideshow?

html

javascript

css

slideshow