Question

我已经建立了一个非常基本的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>

谢谢。

Answer 1

您可以使用CSS为next和prev类设置样式，然后使用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>

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

1 个答案: