我想增加图像的索引号,以实际获取当前图像的大小每次我点击这里的按钮是代码:
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++;
}
请参阅此代码。您可能没有使用函数/全局值的图像索引顶部。这就是它从零开始的原因。
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>