循环遍历图像数组作为轮播

Question

我正在尝试使用零个轮播插件创建一个纯粹 JavaScript 的多项目轮播。

我想实现的是拥有一个div，其中包含4/5张图片。坐在一起。然后当您单击 "next" 或 "prev" 按钮时，您可以滚动图像轮播

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

我的方法是有一个图像数组。
循环显示它们，并排显示在 div.
然后点击下一个按钮，循环显示图像，进一步作为轮播事件。
即使到达列表图像，也要确保轮播继续工作，方法是再次从数组中的第一张图像开始循环。

我卡在了最后一部分。我不确定如何循环浏览我的图片轮播。

到目前为止，我只是静态地展示了它们。你可以看到我已经在遍历我的数组并在 individual 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 method 并循环遍历图像数组：

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();

循环遍历图像数组作为轮播

Loop through array of images as a Carousel

javascript

css

animation

carousel