Question

我一直在研究的jquery滑块在循环前四张图片时工作正常。虽然，当它第二次击中第一张照片时，第一张幻灯片是空白的，但所有其他幻灯片显示完全正常。我已经尝试过更改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);
}

滑块的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 " ...

第一个滑块图像未显示在第二个循环上

1 个答案: