我正在尝试为我的直播设置一个小动画，将 3 个图像从左侧滑到屏幕上，一旦所有 3 个图像都出现在屏幕上，让它们在那里停留大约 30 秒，然后滑出屏幕。我也希望每 15 分钟自动重播这个 30 秒的动画。
我创建了一张图片来更好地帮助描述我在这里为我的直播想要实现的目标。
这就是说，我现在有一个有点工作的版本，但它目前只有一张图片，这是代码:
<html>
<head>
<style>
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 500px;
}
#slide {
position: absolute;
left: -300px;
width: 300px;
height: 75px;
-webkit-animation: slide 30s 0s 1;
}
@keyframes slide {
0% { left: -330px }
3% { left: 0px }
97% { left: 0px }
100% { left: -330px }
}
</style>
</head>
<body>
<div class="wrapper">
<img id="slide" src="http://i.imgur.com/38Tfglv.png" />
</div>
</body>
</html>任何输入都会很棒。我对任何与代码相关的知识都非常有限，这都是我在互联网上搜索并试图弄清楚的。感谢您的帮助!
最佳答案
这对你有用。 如果您需要了解它的工作原理，请检查并告诉我。
$(document).ready(function(){
var slideOutTime=2000; // 2 Seconds
var slideInTime=2000; // 2 Seconds
var slideInAfterTime=5000; // 5 Seconds
var repeatSlidingTime=10000; // 10 Seconds
function slideImage(img){
img.animate({left:'0px'},slideOutTime,function(){
setTimeout(function(){slideBack(img);},slideInAfterTime);
});
var nxt=img.next();
if(nxt.length>0){
setTimeout(function(){
slideImage(nxt);},(slideOutTime/2.5));
}else{
setTimeout(function(){startSliding();},repeatSlidingTime);
}
}
function slideBack(img){
img.animate({left:'-300px'},slideInTime);
}
function startSliding(){
slideImage($('.slide:first'));
}
startSliding();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 500px;
}
.slide {
left:-300px;
position: absolute;
width: 300px;
height: 75px;
}
.slide:nth-child(2) {top:100px;}
.slide:nth-child(3) {top:200px;}
</style>
</head>
<body>
<div class="wrapper">
<img class="slide" src="http://i.imgur.com/38Tfglv.png" />
<img class="slide" src="http://i.imgur.com/38Tfglv.png" />
<img class="slide" src="http://i.imgur.com/38Tfglv.png" />
</div>
</body>
</html>关于html - 为多个 div/图像设置动画以在屏幕上滑动以实现直播布局(html、css、webkit 动画)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39092830/