[jQuery] show hide slideshow

[xandercoded]

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");
    }
});