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

问题描述 投票:-3回答:1

我想增加图像的索引号,以实际获取当前图像的大小每次我点击这里的按钮是代码:

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++;
}
javascript html html5
1个回答
0
投票

请参阅此代码。您可能没有使用函数/全局值的图像索引顶部。这就是它从零开始的原因。

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>
© www.soinside.com 2019 - 2024. All rights reserved.