iOS在图像上方滑动图像,显示图像下方的图像.(A-la jQuery.slide())

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

#image-container {
  overflow: hidden;
  position: relative;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

#image-container img.show {
  opacity: 1;
  transition-delay: 1s;
}

var images = document.getElementById("image-container").children;
var imageWidth = 0;
var imageHeight = 0;
var imageLeft = 0;
var imageTop = 0;
var animationDelay = 0;
var animationDuration = 1000;
var animationIterationCount = 1;

function slideImage(image) {
  image.style.left = imageLeft + "px";
  image.style.top = imageTop + "px";
  image.style.width = imageWidth + "px";
  image.style.height = imageHeight + "px";
  image.style.opacity = 1;
  imageLeft++;
  imageTop++;

  if (imageLeft >= imageWidth) {
    imageLeft = 0;
    imageTop = 0;
    image.style.left = imageLeft + "px";
    image.style.top = imageTop + "px";
    image.style.width = imageWidth + "px";
    image.style.height = imageHeight + "px";
    image.style.opacity = 1;
    animationIterationCount = 1;
    setTimeout(function() {
      slideImage(image);
    }, animationDuration);
  } else {
    setTimeout(function() {
      slideImage(image);
    }, animationDelay);
  }
}

for (var i = 0; i < images.length; i++) {
  slideImage(images[i]);
}