Question

我试图做到这一点，以便每次我单击创建按钮时都会在照片中循环显示。现在它不会做任何我想做的事

我认为for循环将是解决此问题的最佳方法，但我不知道我在做什么

var images = ["img/profile.jpg", "img/mountain.jpg",       "img/sanfran.jpg"];


function loadPage()
{
document.getElementById("pictures").src = images[0];
}

function nextImage()
{
if (document.getElementById("pictures").src = images[0])
 {
    document.getElementById("pictures").src = images[1];
 } else if (document.getElementById("pictures").src = images[1])
  {
    document.getElementById("pictures").src = images[2];
  } else (document.getElementById("pictures").src = images[2]) 
  {
    document.getElementById("pictures").src = images[0];
    }
  }

<body onclick="loadPage()">
<div id="maincontent">
  <div>
     <img id="pictures">
  </div>
  <div id="paragraph">
    <button class="button" onclick="nextImage()">Switch Images</button>
  </div>
</div>
</body>

Answer 1

基本上，我循环浏览存储在数组中的图像名称。我使用模（％）来确保不会超出数组的范围

<body>
<div id="maincontent">
  <div>
     <img src="img/profile.jpg" id="pictures">
  </div>
  <div id="paragraph">
    <button class="button" onclick="nextImage()">Switch Images</button>
  </div>
</div>

<script type="text/javascript">
  var index = 1;
  var images = ["img/profile.jpg", "img/mountain.jpg", "img/sanfran.jpg"];

  function nextImage(){

    document.getElementById('pictures').src = images[index%3];
    index++;
  }

</script>
</body>

Answer 2

==用于条件，=用于分配。但是，我建议在这种情况下使用switch而不是如下的if语句：

<body onclick="loadPage()">
    <div id="maincontent">
        <div>
            <img id="pictures">
       </div>
        <div id="paragraph">
            <button class="button" onclick="nextImage()">Switch Images</button>
        </div>
    </div>    

    <script>
        let images = ["img/profile.jpg", "img/mountain.jpg", "img/sanfran.jpg"];
        let src = document.getElementById("pictures").src

        function loadPage() {
            src = images[0];
        }

        function nextImage() {

            switch (document.getElementById("pictures").src) {
                case images[0]:
                   src = images[1];
                   break
                case images[1]:
                    src = images[2];
                    break
                case images[2]:
                    src = images[0];
                    break
            }
        }

    </script>
</body>

编辑：看来其他人已经想出了一种更有效的方法来完成此操作，但我将其留在此处作为对替代方法的参考。

Answer 3

Jet在正确的轨道上。它将在最后一张图像之后停止工作，因为index将超出范围。

编辑 Jet已经更新了他们的代码，将index限制在边界的方式非常优雅。

请参见以下示例：

<body>
  <div id="maincontent">
    <div>
       <img id="pictures">
    </div>
    <div id="paragraph">
      <button class="button" onclick="nextImage()">Switch Images</button>
    </div>
  </div>
  
  <script>
    var images = [
      "https://via.placeholder.com/150x150.png?text=1",
      "https://via.placeholder.com/150x150.png?text=2",
      "https://via.placeholder.com/150x150.png?text=3"
    ];

    let currentImage = -1;

    function nextImage() {
      currentImage++; // Add 1 to the currentImage variable
      if (currentImage === images.length) {
        currentImage = 0; // If we've reached the last image, go to the first image
      }

      document.getElementById("pictures").src = images[currentImage]; // Set the src image to the current image in our images array
    }

    nextImage();
  </script>
</body>

Answer 4

var images = ["https://via.placeholder.com/150", "https://via.placeholder.com/500",];	
var imageElement = document.getElementById("pictures");
function loadPage() {
		imageElement.src = images[0];
	}

	function nextImage() {
		if(imageElement.src == images[0])
			imageElement.src = images[1];
		else if (imageElement.src == images[1])
			imageElement.src = images[2];
		 else if (imageElement.src == images[2]) 
			imageElement.src = images[0];
	}

<body onclick="loadPage()">
<div id="maincontent">
  <div>
     <img id="pictures">
  </div>
  <div id="paragraph">
    <button class="button" onclick="nextImage()">Switch Images</button>
  </div>
</div>
</body>

问题很简单，在IF条件下使用== ==用于比较，=用于分配

PS，而不是重复调用document.getElementById以获取相同的元素，您还可以将元素的引用存储在变量中一次并使用它，以提高性能

为什么我的图片不能通过if语句

4 个答案: