如何在幻灯片中添加滚动动画？
Posted
技术标签:
【中文标题】如何在幻灯片中添加滚动动画？【英文标题】：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">❮</button>
<button onclick="next()" style="right: 0">❯</button>
</div>
</body>
</html>提前致谢。
【问题讨论】：
这有帮助吗？ ***.com/questions/16989585/… 这能回答你的问题吗？ CSS 3 slide-in from left transition 【参考方案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">❮</button>
<button onclick="next()" style="right: 0">❯</button>
</div>【讨论】：
是否可以在幻灯片背景上也做同样的事情（即蓝色幻灯片中的绿色幻灯片）？ 我已经更新了我的答案，检查一下，如果您有任何疑问，请告诉我以上是关于如何在幻灯片中添加滚动动画？的主要内容，如果未能解决你的问题，请参考以下文章