滑块：图像上的图像动画

Question

我怎样才能让图像动画越过另一个（而不是让白色背景）

到目前为止我的滑块代码：

 var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2500); }

 .w3-animate-left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:-100px;opacity:0} to{left:0;opacity:1}} .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-100px;opacity:0} to{right:0;opacity:1}}

 <div> <img class="mySlides w3-animate-left" src="http://lorempixel.com/400/400/nature/3/" > <img class="mySlides w3-animate-right" src="http://lorempixel.com/400/400/nature/2/" > </div>