使用html5照片幻燈片顯示任意多張照片

Question

我開始從頭開始構建我的新（照片）主頁，以便更好地控制並希望使我更容易對其進行更新。 幫助我輕鬆更新主頁的一件事是，如果主頁可以索引應該顯示的照片，而不是索引照片並在代碼中添加新照片，代碼可以有自己的矢量一旦文件夾更新爲新照片，立即更新。如果我是有一個幻燈片上其改變點擊我現在有這樣的代碼：

<section id="main_section"> 
    <canvas id="myCanvas" width="1280" height="960"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = 'landscape1.jpg'; 
    canvas.addEventListener('click', function() {imageObj.src = 'landscape2.jpg'; }, false); 
</script> 

我希望是改變過去的功能，使每點擊它更改爲向量中的下一張照片。即

canvas.addEventListener('click', function() {x=x+1; imageObj.src = vector(x); }, false); 

其中矢量包含圖片文件的名稱。 假設我有多少張圖片以「landscape」開頭，與html文件位於同一個文件夾中，我該如何創建這個矢量？ 我希望這個問題是清楚

Answer 1

我認爲這個代碼可以幫助：

1. 使用陣列

<canvas id="myCanvas" width="1280" height="960"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 
     var vector = new Array('landscape1.jpg','landspcape2.jpg','landscape3.jpg');//to y 
     var x=1; 
     imageObj.onload = function() { 
      context.fillStyle = "#ffffff"; 
      context.fillRect(0,0,1280,960); 
      context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = vector[0]; 
     canvas.addEventListener('click', function() { 
    if(++x>vector.length)x=1; 
    imageObj.src = vector[x]; }, false); 
    </script> 

2或者只是使用名稱不陣列

<canvas id="myCanvas" width="1280" height="960"></canvas> 
     <script> 
         var canvas = document.getElementById('myCanvas'); 
         var context = canvas.getContext('2d'); 
         var imageObj = new Image(); 
         var x=1; 

         imageObj.onload = function() { 
          context.fillStyle = "#ffffff"; 
          context.fillRect(0,0,1280,960); 
          context.drawImage(imageObj, 0, 0); 
         }; 
         imageObj.src = 'landscape1.jpg' 
         canvas.addEventListener('click', function() { 
        imageObj.src = 'landscape' + (++x) + '.jpg' }, false); 
</script>