Question

我想增加图像的索引号，以使每次单击按钮时实际获得当前图像的大小，这是代码：

var next = document.querySelector("#nextBtn");
var prev = document.querySelector("#prevBtn");
var imgContainer = document.querySelector(".imgContainer");
let img = document.querySelectorAll(".imgContainer > img");

我希望此var imgIndex = 0;递增并存储递增的新值。

let size = img[imgIndex].clientWidth;
next.addEventListener('click', slideImg);

function slideImg() {
    imgContainer.style.transform = "translateX(" + (-size) + "px)";
    imgIndex++;
}

Answer 1

请参阅此代码。您可能未在函数/全局值的顶部使用图像索引。那就是它再次从零开始。

function slideImg() {
    var next = document.querySelector("#nextBtn");
    var prev = document.querySelector("#prevBtn");
    next.addEventListener('click', slideImg1);
}
var imgIndex = 0;
function slideImg1() {
    var imgContainer = document.querySelector(".imgContainer");
    let img = document.querySelectorAll(".imgContainer > img");
    let size = img[imgIndex].clientWidth;
    alert(imgIndex);
    img[imgIndex].style.transform = "translateX(" + (-size) + "px)";
    imgIndex++;
}
</script>

<body onload="slideImg()">
<input type="button" id="nextBtn" value="+" />
<input type="button" id="prevBtn" value="+" />
<div class="imgContainer">
    <img src="file" />
    <img src="file" />
</div>
</body>

我想每次单击按钮以使滑块工作时都递增索引号

1 个答案: