向我的JavaScript滑块添加箭头

时间:2018-07-10 08:46:17

标签: javascript

我有这个图像滑块:

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

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

1 个答案:

答案 0 :(得分:-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();

关于, 文森特