分享原生JavaScript写轮播图遇到的问题_js学习轮播遇到问题

源码

window.addEventListener('DOMContentLoaded',function () {
    /* 获取元素 */
    var section = document.querySelector('.section'); /* 轮播图显示区 */
    var slideshow = document.querySelector('.slideshow'); /* 轮播图移动区 ul */
    var arrow = document.querySelector('.arrow'); /* 箭头区 */
    
    /* 获取轮播显示区的宽度 */
    var sectionW = section.clientWidth;
    
    /* 给图片设定索引 index */
    var index = 1;

    /* 节流阀 */
    var throttle = true;

    /* 定义移动时钟 */
    var OverTime = null;

    /* 点击右箭头图片切换 */
    arrow.children[1].addEventListener('click',gtOver);

    /* 右箭头点击执行程序函数 */
    function gtOver() {
        if (throttle) {
            clearInterval(OverTime);
        }else {
            index ++;
            throttle = true;
        }

        /* 使用时钟移动图片区 */
        OverTime = setInterval(function () {
            slideshow.style.left = - (Math.abs(slideshow.offsetLeft) + 10) + 'px';
            if (Math.abs(slideshow.offsetLeft) >= sectionW * index) {
                slideshow.style.left = - sectionW * index + 'px';
                clearInterval(OverTime);
                throttle = false;
            }
        },10);
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

问题

在图片还没有完成切换时，连续点击只能生效一次图片，而不是连续点击导致切换图片过快、过多的问题。

解决方法