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

其中向量包含图片文件的名称。假设我在html文件所在的文件夹中有y个以“landscape”开头的图片，我该如何创建这个向量？我希望问题很清楚

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

照片幻灯片显示使用html5任意多张照片

1 个答案: