Question

我正在尝试制作一个简单的幻灯片循环来浏览我的图像。我遇到的问题是尝试使用document.getElementById("image_wrapper").getElementsByTagName("img")仅选择“image_wrapper”div中的图像是它还从兄弟div中选择图像。我只想循环遍历image_wrapper div中的图像。

html onclick在点击右箭头时调用addOne()，在点击左箭头时调用takeOne()

var x = 0;

var hideImage = document.getElementsByClassName("profile_image");           
function displayOne() {
    for(i = 0; i < hideImage.length; i++) {
      if(i == 0) {
        hideImage[0].style.display = "inline-block";
      }
    }
}

function addOne() {
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
    if(x < profileImg.length ) {
        x++; 
    } else {
      x = 0;
    }
    for(i = 0; i < profileImg.length ; i++) {
      if(x == profileImg.length) { x = 0;}
      if(x == i) {
          profileImg[i].style.display = "inline-block";
      } else {
        profileImg[i].style.display = "none";
      }
    }
}

function takeOne() {
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
    if(x > 0 ) {
      x--; 
    } else {
      x += profileImg.length - 1 ;
    }
    for(i = 0; i < profileImg.length ; i++) {
      if(x == -1) { x = profileImg.length; }
      if(x == i) {
        profileImg[i].style.display = "inline-block";
      } else {
        profileImg[i].style.display = "none";
      }
    }
}

Answer 1

你有没有尝试过;

document.querySelectorAll('#image_wrapper img');

document.querySelectorAll()和document.querySelector()可以选择css选择器。

如何仅在指定的div

1 个答案: