如何为幻灯片添加过渡幻灯片图像？

Question

Im working in an image slider. 我在图像滑块中工作。 What I was able to do is very simple, and I want to add a transition effect like image sliding , or something like that. 我能够做的很简单，我想添加过渡效果，例如图像滑动或类似的效果。 If someone knows how to add it to my code it would help me a lot. 如果有人知道如何将其添加到我的代码中，它将对我有很大帮助。 Here is what I did so far: 这是我到目前为止所做的：

 .banner-container { width: 100%; position: relative; z-index:0; height:100% !important; background: no-repeat center center scroll } .banner-container.nomgr { margin-top:0px; } .banner-container-center { margin-top:-105px; width: 100%; position: relative; z-index:0; } .banner { width: 100%; position: relative; z-index:0; height:120 !important; background: no-repeat center center scroll } .banner-full-height { width: 100%; height:auto; position: relative; z-index:2; } .banner-center { width: auto; position: relative; z-index:2; }

  <div class="banner-container revolution"> <div class="banner"> <ul> <li > <img src="/images/slide1.png" /></li> <li > <img src="/images/slide2.png" /></li> <li > <img src="/images/slide3.png" /></li> </ul> </div> </div>

Answer 1

I have edited your code to add the effect. 我已经编辑了您的代码以添加效果。 Change the image source before using 使用前更改图像来源

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body{
        margin: 0px;
        width: 100%;
        padding: 0px;
    }

.ani-top{position:relative;animation:animatetop 0.5s}
@keyframes animatetop{from{top:-500px;opacity:0} 
to{top:0;opacity:1}}

</style>

</head>
<body>
<div  style="max-width:500px">
  <img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(1).jpg" style="width:100%">
  <img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(2).jpg" style="width:100%">
  <img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download.jpg" style="width:100%">
  <img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(3).jpg" style="width:100%">
</div>

<script type="text/javascript">
var pos = 0;
slideshow();

function slideshow() {
  var i;
  var x = document.getElementsByClassName("slidetop");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  pos++;
  if (pos > x.length) {pos = 1}    
  x[pos-1].style.display = "block";  
  setTimeout(slideshow, 2500);    
}
</script>
</body>
</html>

如何为幻灯片添加过渡幻灯片图像？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-22 05:19:34

如何为幻灯片添加过渡幻灯片图像？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-22 05:19:34

解决方案1
0 已采纳 2019-02-22 05:19:34