我没有 Javascript 经验，阅读了这么多帖子让我不知所措。非常感谢您的帮助。
我正在尝试让我的页面图像慢慢“滑入”到其最终位置：当点击页面时，从（不可见的）左侧到中心。
我试过搜索这个，但弹出的大部分内容都是“如何制作 javascript 幻灯片放映”。
问题也是“如何让 div 从一个位置滑入下一个位置？” （因为图像将在 div 内。
我猜它会在 WindowLoad() 上发生。
再次感谢您的帮助。这个社区很棒。
【问题讨论】：
标签： javascript html css image animation
我知道你问的是关于 JS 的问题，但这是一个想法。您也可以在 CSS 中使用动画来做到这一点。看看：
将此应用于容器：
animation: slideInFromRight 1s ease-in;
这需要分开：
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
【讨论】：
我们需要三个文件来做到这一点
所以我们想把这三者结合起来得到最终的输出。
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Slideshow example</title>
<link rel="stylesheet" href="./style.css"> <!-- load style.js // consider both files in same folder -->
</head>
<body>
<div id="slideshow-example" data-component="slideshow">
<div role="list">
<div class="slide"> <!-- Load image 01 -->
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</div>
</div>
</div>
<script src="./script.js"></script> <!-- load script.js // consider both files in same folder -->
</body>
</html>
script.js
var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // call slidshow data-component
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) { // slideshow function
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
var index = 0, time = 5000; // set slide time
slides[index].classList.add('active');
setInterval( () => { // slide every 5 second
slides[index].classList.remove('active');
index++;
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
}
style.css
[data-component="slideshow"] .slide {
display: none;
text-align: center;
}
[data-component="slideshow"] .slide.active {
display: block;
}
在一个文件夹中创建所有这三个文件并运行 index.html 文件。 您可以通过替换 URL 来使用自己的图像。
【讨论】：
我可以建议一件事，那就是假的。一旦我们加载了我们的网站，我们就可以显示一个动画，显示一些加载效果，然后加载我们的完整网站。
第 1 步
根据您的需要设置 div 样式。
第 2 步
创建一个带有动画样式的单独类（在 CSS 中，不是在 HTML 中）。像这样。
.animation {
animation: name duration timing-function delay iteration-count direction fill-mode;
}
不要忘记添加关键帧。
@keyframes name {
0% {
/* Styles */
}
100% {
/* Styles */
}
}
第 3 步
现在我们使用 JavaScript。
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('div').classList.add('animation');
});
另外，如果您对 CSS 动画感兴趣，可以查看我的 blog，我正在那里开设关于动画的短期课程。
编码愉快！
【讨论】：