迭代顯示一組圖像，一次只顯示一個圖像

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>