不明白计数器在javascript中的作用是什么
Dont figure what s the role of the counter in javascript
我想在 js 中创建一个全屏图像滑块,所以我看了一个教程,除了 'counter' 之外,我了解了大部分内容。我知道它代表当前图像,但我不知道它是如何实现的这样做,如何分配。
这是代码
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0; (!!!!THIS ONE I DON`T UNDERSTAND HOW IT S REPRESENTING THE CURRENT IMAGE!!!
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
!!这是教程中的 LINK https://youtu.be/7ZO2RTMNSAY
当前被用作数组的索引,该数组包含幻灯片名称为 class 的所有元素。
阅读更多关于数组的内容可能对您有所帮助:https://www.w3schools.com/js/js_arrays.asp
我想在 js 中创建一个全屏图像滑块,所以我看了一个教程,除了 'counter' 之外,我了解了大部分内容。我知道它代表当前图像,但我不知道它是如何实现的这样做,如何分配。
这是代码
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0; (!!!!THIS ONE I DON`T UNDERSTAND HOW IT S REPRESENTING THE CURRENT IMAGE!!!
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
!!这是教程中的 LINK https://youtu.be/7ZO2RTMNSAY
当前被用作数组的索引,该数组包含幻灯片名称为 class 的所有元素。
阅读更多关于数组的内容可能对您有所帮助:https://www.w3schools.com/js/js_arrays.asp