Question

我有这个图像滑块：

<div class="image-slider">
        <div class="arrows">
            <i class="fa fa-arrow-circle-left"></i>
            <i class="fa fa-arrow-circle-right"></i>
            </div>

这是我的JavaScript，可使其自动滑动图像：

var imageArray = [
    './images/image-slider1.jpg',
    './images/image-slider2.jpg',
    './images/image-slider3.jpg',
];

var index = 0;
imageDuration = 6000;

function slideShow() {
    document.getElementById('image').src = imageArray[index];
    index++;
    if (index == imageArray.length) {
        index = 0;
    }
    setTimeout('slideShow()', imageDuration);
}

slideShow();

如何使左箭头显示上一张幻灯片，向右箭头显示下一张幻灯片？

Answer 1

您可以尝试以下操作，但我并未对其进行测试：

var imageArray = [
    './images/image-slider1.jpg',
    './images/image-slider2.jpg',
    './images/image-slider3.jpg',
];

var index = 0;
var timerId = null;
var imageDuration = 6000;

function slideShow() {
    clearTimeout(timerId);
    document.getElementById('image').src = imageArray[index];
    index = (index + 1) % imageArray.length;
    timerId = setTimeout('slideShow()', imageDuration);
}

document
  .querySelector('div.arrows i.fa-arrow-circle-left')
  .addEventListener('click', () => {
    index = index == 0 ? imageArray.length - 1 : index - 1;
    slideShow();
  });

document
  .querySelector('div.arrows i.fa-arrow-circle-right')
  .addEventListener('click', () => slideShow());

slideShow();

关于，文森特

向我的JavaScript滑块添加箭头

1 个答案: