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