jquery - 第一个 slider 图像未显示在第二个循环中

Question

我一直在研究的一个 jquery slider 在循环播放前四张图片时工作正常。虽然，当它第二次点击第一张图片时，第一张幻灯片是空白的，但所有其他幻灯片都显示得很好。我试过更改 sliderIndex 和 sliderNext 变量也无济于事。

slider 循环功能代码:

$(document).ready(function(){
    startSlider();
});

function startSlider() {
count = $("#slider-images img").size();
sliderIndex = 1;
sliderNext = 2;

loop = setInterval(function() {

    if(sliderNext > count){
        sliderNext = 1;
        sliderIndex = 1;
    }

    slideOut("#slider-images img", "left");
    slideIn("img#slide-" + sliderNext, "right");

    sliderIndex = sliderNext;
    sliderNext = sliderNext + 1;

    }, 6000);
}

slider 的 HTML:

<div id="slider">
    <img id="previous" src="img/previous.png" alt="" />
    <img id="next" src="img/next.png" alt="" />

    <div id="slider-images">
        <img id="slide-1 "src="img/slide-1.jpg" alt="" />
        <img id="slide-2" src="img/slide-2.jpg" alt="" />
        <img id="slide-3" src="img/slide-3.jpg" alt="" />
        <img id="slide-4" src="img/slide-4.jpg" alt="" />
    </div>
</div>

slider CSS:

#slider {
    height: 700px;
    width: 100%;
}

#slider-images {
    width: 100%;
    height: 700px;
    overflow: hidden;
}

Answer 1

如果粘贴的代码与您的实际代码匹配，则 slide-1 的 ID 中有一个空格，因此您的代码找不到它。

<img id="slide-1 " ...