为什么我的一张幻灯片在此幻灯片中随机消失？

Question

这很烦人，让我失去理智。我一辈子都想不通为什么会这样。

Here's the link

我正在为滑块使用ResponsiveSlides 插件 - 我会假设一旦它到达幻灯片的末尾，它就会重复回到第一张幻灯片。

相反，它似乎到达幻灯片的结尾，然后显示一张空白幻灯片，然后重复回到第一张幻灯片。

当我尝试使用 Orbit 滑块时，也会出现同样的效果。并且当我尝试使用另一个滑块时。

我确信这不是滑块插件的错（我怀疑所有 3 个滑块插件都会在幻灯片结束时随机显示一张空白幻灯片）。

我想过/尝试过的事情： - 想也许其中一张图片坏了……不。这是我的标记：

<!-- begin slider -->
<div class="slider">
    <ul class="rslides">
        <li><img class="slider-image" src="images/slider1.jpg" alt="Slider Picture 1 - Kilmarnock by the Sea" id="slider1"></li>
        <li><img class="slider-image" src="images/slider2.jpg" alt="Slider Picture 2 - Kilmarnock by the Sea" id="slider2"></li>
        <li><img class="slider-image" src="images/slider3.jpg" alt="Slider Picture 3 - Kilmarnock by the Sea" id="slider3"></li>
        <li><img class="slider-image" src="images/slider4.jpg" alt="Slider Picture 4 - Kilmarnock by the Sea" id="slider4"></li>
        <li><img class="slider-image" src="images/slider5.jpg" alt="Slider Picture 5 - Kilmarnock by the Sea" id="slider5"></li>
        <li><img class="slider-image" src="images/slider6.jpg" alt="Slider Picture 6 - Kilmarnock by the Sea" id="slider6"></li>
        <li><img class="slider-image" src="images/slider7.jpg" alt="Slider Picture 7 - Kilmarnock by the Sea" id="slider7"></li>
    <li>
</div>
<!-- end slider -->

还有我的 JavaScript：

$(function() {
    $('.rslides').responsiveSlides({
        auto: true,
        speed: 500,
        random: true,
        timeout: 2500
    });
});

这些图像中的每一个都存在于服务器上，并且控制台中没有 404，就好像我正在尝试访问一个不存在的图像......但是：滑块仍然显示一张空白幻灯片！

有人知道吗？

Answer 1

你写的是<li>而不是</ul>。这会被解析为一个额外的列表元素，并且您会得到一张额外的空白幻灯片。