循环通过图像阵列作为旋转木马

Question

我正试图用纯JavaScript创建一个多项目转盘，使用零转盘插件。

我想要实现的是有一个div，它包含4/5个图像。挨着坐着。然后，当你点击"下一步"或"上一步"按钮时，你可以滚动浏览图像转盘

到目前为止，这里有一个代码笔：https://codepen.io/ReenaVerma1981/pen/KKKZoYV

• 我的方法是使用一组图像
• 循环浏览它们以在div中并排显示它们
• 然后单击下一个按钮，循环显示图像，作为旋转木马事件
• 即使到达列表图像，也要通过再次从数组中的第一个图像循环来确保转盘继续工作

我被最后一部分卡住了。我不知道如何循环浏览我的图像转盘。

到目前为止，我只是静态地显示了它们。你可以看到，我已经在循环遍历我的数组，并在一个单独的div中显示每个图像。在一个容器转盘div中。

const arrayCarousel = ['https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/200', 
'https://www.fillmurray.com/200/200', 
'https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/100'];

for (let i = 0; i < arrayCarousel.length; i++) {
const imageURL = arrayCarousel[i];
console.log('imageURL', imageURL);
const divElement = document.createElement("div");
const imgElement = document.createElement("img");
imgElement.src = imageURL;
divElement.classList.add("item");
divElement.appendChild(imgElement);
carouselContainer.appendChild(divElement);
}

<section>
<div class="carousel-container" id="carousel-container">
</div>
</section>

不确定如何进行下一部分。。。。动态地滚动我的图像阵列

关于如何使用图像阵列创建多项目旋转木马，有什么技巧吗？

谢谢！

Answer 1

您可以尝试使用setInterval方法并循环使用您的图像数组：

const arrayCarousel = ['https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/200', 
'https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/100'];
counter = 0
const setImage = () => {
document.getElementById("carousel-image").src = arrayCarousel[counter];
counter = (counter+1)  % arrayCarousel.length;
}
setInterval(setImage, 1000);

<section>
<img id="carousel-image" >
</section>

Answer 2

这是我很快想到的。可能不是复制粘贴解决方案。只是分享如何做到这一点的一般想法。

缩放动画应该可以正常工作。幻灯片动画需要使用DOM元素，而不是交换图像

/**
* Deregisters the carousal when either next or previous
* button is clicked. On button clicks, deregister and 
* re-register is required to avoid image change collisions.
* 
* Callback is executed which changes the order of images
* array.
* 
* setItem is called to apply the image order changes.
* 
* registerCarousal registers a new carousal loop, so that the
* loop continues forever.
*/
function onButtonClick(callback) {
if (typeof callback !== 'function') return;
deregisterCarousel();
callback();
setItem();
registerCarousal();
}
/**
* Responsible for changing the src on the
* carousalItems.
*/
function setItem() {
var img = document.getElementsByClassName('carousalItems');
for (let i = 0; i < img.length; li++) {
img.src = images[i];
}
}
/**
* Removes the first image and pushes it to the
* end of the array.
*/
function shiftForNext() {
let firstItem = images.shift();
images.push(firstItem);
}
/**
* Deregisters the existing timer.
*/
function deregisterCarousel() {
if (timer == null) return;
clearInterval(timer);
timer = null;
}
function registerCarousal() {
// Remove any existing timer.
deregisterCarousel();
// Loop every 1.5 seconds and shifts the 
// images from 0 to length direction.
timer = setInterval(function () {
shiftForNext();
// Responsible for changing the image src
// on carousal list elements.
setItem();
}, 1500);
}
let timer = null;
let images = [
'https://www.fillmurray.com/g/200/200',
'https://www.fillmurray.com/200/200',
'https://www.fillmurray.com/200/200',
'https://www.fillmurray.com/g/200/200',
'https://www.fillmurray.com/200/100',
'https://www.fillmurray.com/200/100',
'https://www.fillmurray.com/200/100',
];
// Registers the next button click.
document.getElementById('next').addEventListener('click', function () {
onButtonClick(function () {
shiftForNext();
});
});
// Registers the previous button click.
document.getElementById('prev').addEventListener('click', function () {
onButtonClick(function () {
// Removes the last element of the images array
let lastItem = images.pop();
// And pushes it to the first position.
images.unshift(lastItem);
});
});
// Registers the carousal
registerCarousal();