使图像滑块自动工作答案

【问题标题】：Making image slider work automatically使图像滑块自动工作
【发布时间】：2013-02-18 17:19:02
【问题描述】：

我已将图像滑块导入我的网页。它工作正常，但不能自动工作。我试图添加一些 jquery 使图像在 4 秒后发生变化，但由于某种原因，它只工作一次并转到列表中的最后一个图像。有人可以告诉我哪里出错并帮助我使滑块自行工作。

这是标记...

<ul id="body">
<input type="radio" name="radio-btn" id="img-1" checked />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/blackscale.jpg">
    </div>
    <label for="img-6" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-2" class="sb-bignav" title="Next">&#x203a;</label>
</li>

<input type="radio" name="radio-btn" id="img-2" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/huf.jpg">
    </div>
    <label for="img-1" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-3" class="sb-bignav" title="Next">&#x203a;</label>
</li>

<input type="radio" name="radio-btn" id="img-3" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/palace.jpg">
    </div>
    <label for="img-2" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-4" class="sb-bignav" title="Next">&#x203a;</label>
</li>

<input type="radio" name="radio-btn" id="img-4" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/skatecafe.jpg">
    </div>
    <label for="img-3" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-5" class="sb-bignav" title="Next">&#x203a;</label>
</li>

<input type="radio" name="radio-btn" id="img-5" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/only.jpg">
    </div>
    <label for="img-4" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-6" class="sb-bignav" title="Next">&#x203a;</label>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/supreme.jpg">
    </div>
    <label for="img-5" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-7" class="sb-bignav" title="Next">&#x203a;</label>
</li>
<input type="radio" name="radio-btn" id="img-7" />
<li id="img-container">
    <div id="img-inner">
        <img src="file:///C:/smilburn/Practices/images/adidas.jpg">
    </div>
    <label for="img-6" class="sb-bignav" title="Previous">&#x2039;</label>
    <label for="img-8" class="sb-bignav" title="Next">&#x203a;</label>
</li>

这是我添加的 jquery..

function gogo(){
    $('label[title="Next"]').click();
}
$(document).ready(function () {
    setInterval('gogo()',4000);
});

【问题讨论】：

您不能让这些输入标签在 LI 标签之外浮动。 UL 或 OL 只能包含 LI 标签，而其他元素则放置在这些 LI 标签中。你也没有结束 UL 标记。
另外click()不会触发click事件，如果你想在jquery中触发事件使用$('label[title="Next"]').trigger('click');
我只是试图将它们放入 LI 中，但它完全破坏了它@BillyMoat
你用的是哪个轮播？
如果你提到滑块，至少可以测试一个可能的解决方案，这可能会有所帮助。如果没有这些信息，我们可能会在黑暗中刺伤。

标签： javascript jquery html image slider

【解决方案1】：

试试这个......易于使用滑块插件

http://bxslider.com/

或者这个

http://rhinoslider.com

【讨论】：