如何在幻灯片中添加滚动 animation？
[英]How do I add a scrolling animation to my slideshow?
问题描述
I've built a pretty basic HTML/CSS/JS slideshow.
我已经构建了一个非常基本的 HTML/CSS/JS 幻灯片。 When I click the button on the right, the slide switches to the next slide, and when I click the button on the left, the slide switches to the previous slide.当我点击右边的按钮时，幻灯片切换到下一张幻灯片，当我点击左边的按钮时，幻灯片切换到上一张幻灯片。
However, I would like to add in a scrolling animation to make the slideshow feel less rigid;但是，我想添加一个滚动 animation 以使幻灯片感觉不那么僵硬； when I press the button on the right, I want the slide to 'slide' in from the right, and when I press the button on the left I want it to slide in from the left.当我按下右侧的按钮时，我希望幻灯片从右侧“滑入”，当我按下左侧的按钮时，我希望它从左侧滑入。
I've been researching possible ways to do this and came across CSS animations, specifically the w3.css framework ( https://www.w3schools.com/w3css/w3css_animate.asp ), but am not sure how I would implement this given that my slideshow already makes use of classes in order to switch between slides. I've been researching possible ways to do this and came across CSS animations, specifically the w3.css framework ( https://www.w3schools.com/w3css/w3css_animate.asp ), but am not sure how I would implement this given我的幻灯片已经使用类来在幻灯片之间切换。
Here is my code:这是我的代码：
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>
Thanks in advance.提前致谢。
1 个解决方案
解决方案1
1 已采纳 2020-07-10 19:55:24
you can style a next and prev classes with CSS and then toggle them with js like this snippet您可以使用 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">❮</button> <button onclick="next()" style="right: 0">❯</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.