如何在幻灯片中添加滚动动画？答案

【问题标题】：How do I add a scrolling animation to my slideshow?如何在幻灯片中添加滚动动画？
【发布时间】：2020-10-31 14:01:10
【问题描述】：

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

不过，我想添加一个滚动动画，让幻灯片感觉不那么僵硬；当我按下右侧的按钮时，我希望幻灯片从右侧“滑入”，当我按下左侧的按钮时，我希望它从左侧滑入。

我一直在研究可能的方法来做到这一点，并遇到了 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>

提前致谢。

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/16989585/…
这能回答你的问题吗？ CSS 3 slide-in from left transition

标签： javascript html css slideshow

【解决方案1】：

您可以使用 CSS 设置下一个和上一个类的样式，然后使用像 sn-p 这样的 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>

【讨论】：

是否可以在幻灯片背景上也做同样的事情（即蓝色幻灯片中的绿色幻灯片）？
我已经更新了我的答案，检查一下，如果您有任何疑问，请告诉我