[jQuery] show hide slideshow
I know this may be simple, nonetheless I am having issues. Below is
the code im working with. Can someone guide me as to a way of getting
my custom slideshow to work properly.
Expectations: Hide all <li>'s except the first one and then loop
through all the images with a settimeout to fadin and fadeout each
sample image...
Solutions and suggestions will be greatly appreciated!!!
-- This is where I am at in the code at the moment and have been
trying different alternatives with the JQuery, to no avail.
<!--HTML////////////////////////////////////////////-->
<div id="show">
<ul>
<li><a href="#">
<img alt="Css Template Preview"
src="images/sample.png" />
</a></li>
<li><a href="#">
<img alt="Css Template Preview"
src="images/sample_2.png" />
</a></li>
<li><a href="#">
<img alt="Css Template Preview"
src="images/sample.png" />
</a></li>
<li><a href="#">
<img alt="Css Template Preview"
src="images/sample_2.png" />
</a></li>
<li><a href="#">
<img alt="Css Template Preview"
src="images/sample.png" />
</a></li>
</ul>
</div>
//Javascript---------------------------------------------------------
$(function() {
init();
for (var i = 1; i < $("div#show li").size(); i++) {
$("div#show li")[i].hide();
}
for (var i = 0; i < $("div#show li").size(); i++) {
setTimeout(function() {
$("div#show li")[i - 1].fadeOut();
$("div#show li")[i].fadeIn();
}, "8000");
}
});