Javascript 迭代显示一组图像，一次仅显示一个

是否有一种方法可以循环显示一定数量的图像，依次显示每个图像（一次仅显示一个，每个新图像与前一个图像在同一位置）？我将如何做到这一点

---

我设法用jQuery创建了这种效果，在jQuery中，我对每个图像进行淡入淡出。有没有一种方法可以在不使用额外库的情况下使用JavaScript实现这一点？

我使用这段代码来实现您所说的

注意：它将在最后一张图像上停止

<script type="text/javascript">
// <!--
var imagePaths = ["images/slide1.jpg", "images/slide2.jpg", "images/slide3.jpg"];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var timeoutVariable = 3000;

window.onload = function () {
  showCanvas = document.getElementById('SlideShowCanvas');
  showCanvasCtx = showCanvas.getContext('2d');
  img.setAttribute('width', '560');
  img.setAttribute('height', '343');
  switchImage();
  setInterval(switchImage, timeoutVariable);
}

function switchImage() {
// Loop once
if (currentImage >= imagePaths.length) {
  clearInterval(revealTimer);
  clearTimeout(timeoutVariable);
} else {
  img.setAttribute('src', imagePaths[currentImage++]);
  showCanvasCtx.globalAlpha = 0.1;
  revealTimer = setInterval(revealImage, 100);
}

function revealImage() {
  showCanvasCtx.save();
  showCanvasCtx.drawImage(img, 0, 0, 560, 343);
  showCanvasCtx.globalAlpha += 0.1;
  if (showCanvasCtx.globalAlpha > 1.0)
  clearInterval(revealTimer);
  showCanvasCtx.restore();
}
// -->
</script>

// 

哎哟 忘记添加html了

<canvas id="SlideShowCanvas" style="width: 560px; height: 343px;" width="560px" height="343px">
  <div style="width: 560px; text-align: center; vertical-align: middle; height: 343px; border: 1px solid #C0C0C0;">
    <span style="width: 560px; height: 343px;">
      <br /><br />Your browser does not support<br />the html5 canvas object!<br /><br /><a href="http://www.microsoft.com/ie">Click Here To Download Microsoft's</a><br />Feature Rich Internet Explorer Web Browser<br />
    </span>
  </div>
</canvas>

您的浏览器不支持html5画布对象



功能丰富的Internet Explorer Web浏览器

jQuery是JavaScript…在jQuery中可以做的任何事情都可以用纯JavaScript完成。查看jQuery的源代码，看看它是如何做到

fadeIn

和

fadeOut

。你必须看看jQuery是如何制作动画的；不过，CSS3也有一些你可以使用的时髦东西：）只是好奇为什么不能使用jQuery的约束？