我有这个图像滑块:
<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();
如何使左箭头显示上一张幻灯片,向右箭头显示下一张幻灯片?
答案 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();
关于, 文森特