我想在不使用 jQuery 的情况下使用 js 中的 for 循环更改图像答案

【问题标题】：i want to change image using for loop in js without using jQuery我想在不使用 jQuery 的情况下使用 js 中的 for 循环更改图像
【发布时间】：2022-01-02 12:59:00
【问题描述】：

我不明白为什么这不起作用？请告诉我我在这段代码中遗漏了什么 ** html **

<div id="img">
            <img class="images"src="images/boy1.jpg">
        </div>

** js **

var images = new Array();

images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";


function changeImg(){

    let img = document.querySelector(".images");   
    for(let i=0;i<images.length;i++){
       img.src = images[i]
    }
}

document.getElementById("btn").addEventListener("click",changeImg)

【问题讨论】：

“不工作”是什么意思？具体是什么不起作用？
您的 HTML 也没有 id 为 btn 的元素，因此您将无法向其中添加点击事件侦听器，这会导致问题

标签： javascript for-loop

【解决方案1】：

试试看：

  var images = new Array();

    images[0] = "/images/boy1.jpg";
    images[1] = "/images/boy2.jpg";
    images[2] = "/images/boy3.jpg";
    images[3] = "/images/girl1.jpg";
    images[4] = "/images/girl2.jpg";


    function changeImg() {

    
      const imgBox = document.getElementById("img");
      for (let i = 0; i < images.length; i++) {
        const img = document.createElement("img");
        img.src = images[i]
        imgBox.appendChild(img)

      }
    }

    document.getElementById("btn").addEventListener("click", changeImg)

<div id="img"></div>
<button id="btn">Start</button>

【讨论】：

【解决方案2】：

您的循环总是取最后一张图片并将其设置为 img 标签的来源，您需要做的是更改索引，然后只将索引图像设置为来源：

const image = document.querySelector(".images");
let currentIndex = 0;
let images = new Array();

images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";

const length = images.length;

function changeImg(){
    // increment currentIndex in a circular way; after 4 comes 0 again
    currentIndex = ++currentIndex % length;
    image.src = images[currentIndex];
}

document.getElementById("btn").addEventListener("click", changeImg);

【讨论】：

【解决方案3】：

这是你想要达到的目标吗？

var images = new Array();
var imgIndex = 0;

images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";


function changeImg() {
  var myImg = document.getElementById("myImg");
  if (imgIndex < images.length - 1) {
    imgIndex++;
  } else {
    imgIndex = 0;
  }

  myImg.src = images[imgIndex];
}

document.getElementById("btn").addEventListener("click", changeImg);

<div id="img">
  <img id="myImg" class="images" src="images/boy1.jpg">
</div>

<button id="btn">Next</button>

【讨论】：

是的...但是当我刷新页面然后循环开始时循环结束时它不会开始显示起始图像...是否可以在单击下一个 btn 后在最后一个图像之后显示第一个图像
@Nidhisharma 它确实会循环：到达最后一张图片后，如果单击“下一步”按钮，则会显示第一张图片。

【解决方案4】：

您的 for 循环立即更改 img.src 五次，因此最终结果为 images[4]，您看不到其他图像。

【讨论】：