首先执行函数，然后在Javascript

Question

我正在尝试创建幻灯片，其中当前照片在下面以圆形列出，并且圆圈会根据显示的当前照片更改颜色。然后，用户应该可以点击每个＆＃34; bubble＆＃34;当节目从那一点继续时，转到相应的照片。

我遇到的问题是我无法删除该类，然后收集泡泡的索引。我无法弄清楚如何使用$ bubbles.onclick使用两个单独的循环。我尝试使用警报进行测试，它只显示第二个警报。

单独注意，我也无法获得最后一个删除类的气泡。 clipIndex跳过数组的最后一个值并重置而不显示警告，最后一个气泡保持粉红色。

有什么建议吗？很抱歉，如果帖子不清楚或者代码没有读好，这是我的第一篇文章。

    <div id="slideShow">
        <img class="clip currentClip" src="img/index01.jpg">
        <img class="clip" src="img/index02.jpg">
        <img class="clip" src="img/index03.jpg">
        <img class="clip" src="img/index04.jpg">
        <div id="sliderBubble">
            <img class = "bubbles currentBubble" src="img/sBubblePink.png">
            <img class = "bubbles" src="img/sBubble.png">
            <img class = "bubbles" src="img/sBubble.png">
            <img class = "bubbles" src="img/sBubble.png">
        </div>
    </div>

   .clip {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    display: none;
    margin-left: 50px;
    border-radius: 10px;
    }
    .currentClip {
    display: block;
    }
    #sliderBubble {
    display: block;
    height: 10px;
    margin-top: 580px;
    text-align:center;
    }

    var $clips = $(".clip"),
    clipIndex = 0,
    numClips = $clips.length,
    sliderSpeed = 4000,
    sliderEffect = 1000,
    $bubbles = $(".bubbles");


    fadeOutCurrent = function() {
        $($clips[clipIndex++ % numClips]).fadeOut(sliderEffect, function() {
            $(this).removeClass("currentClip");
        });
    },

    fadeInNext = function () {
        $($clips[clipIndex % numClips]).fadeIn(sliderEffect, function () {
            $(this).addClass("currentClip");
        });
    },

    setBubble = function() {
        $bubbles[clipIndex % numClips].src = "img/sBubblePink.png";
        $bubbles[(clipIndex % numClips) -1].src = "img/sBubble.png";
    },

    initSlider = function () {
        setInterval(function() {
            fadeOutCurrent();
            fadeInNext();
            setBubble();
        }, sliderSpeed);
    };

newClipIndex = function () {
    for (var i = 0; i < numClips; i++) {
        // Insert Function here for removeclass current bubble onclick
        (function(clipIndex) {
            $bubbles[i].onclick = function() {
                alert(clipIndex);
                $($clips[clipIndex]).addClass("currentClip");
            }
        })(i);
    }
};