迭代显示一组图像，一次只显示一个图像

Question

有没有办法循环显示一组图像，依次显示每一个图像（每次只能显示一个图像，每个图像位于同一个位置）前一个）？我怎么做到这一点？

我设法用jQuery创建这种效果，其中我将淡入淡出每个图像。有没有办法做到这一点与JavaScript，没有额外的库？

Answer 1

我用这个代码做你说什么。

注意：它会停在最后一张图片上。

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