Как добавить переходное скользящее изображение для моего слайд-шоу? - PullRequest
Новая
       25

Как добавить переходное скользящее изображение для моего слайд-шоу?

0 голосов
/ 22 февраля 2019

Я работаю в слайдере изображений.То, что я смог сделать, очень просто, и я хочу добавить эффект перехода, например, скольжение изображения или что-то в этом роде.Если кто-то знает, как добавить его в мой код, это мне очень поможет.Вот что я сделал до сих пор: 

.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>

1 Ответ

0 голосов
/ 22 февраля 2019

Я отредактировал твой код, чтобы добавить эффект.Перед использованием 

<!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>
измените источник изображения.
...