I have imported a image slider into my webpage. It works fine but doesn't work automatically. I have tried to add some jquery that makes the image change after 4 seconds but for some reason it only works once and goes to the last image in the list. Can someone show me where I am going wrong and help me to make the slider work on its own.
Here is the mark-up...
<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">‹</label>
<label for="img-2" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-3" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-4" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-5" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-6" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-7" class="sb-bignav" title="Next">›</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">‹</label>
<label for="img-8" class="sb-bignav" title="Next">›</label>
</li>
Here is the jquery I have added..
function gogo(){
$('label[title="Next"]').click();
}
$(document).ready(function () {
setInterval('gogo()',4000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.