Question

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

我要实现的是一个div，其中包含4/5张图片。坐在彼此旁边。然后，当您单击“下一个”或“上一个”按钮时，可以在图像轮播中滚动

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

我的方法是拥有一组图像。
遍历它们以在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();

像轮播一样循环遍历图像阵列

2 个答案: