javascript help

i am making a javascript slide show. i am using this code for js:

<script language="JavaScript" type="text/javascript">
            //<!--
            //<![CDATA[
            
            first = 1;
            last = 2;
            current = 1;
            
            function nextPicture() {
                // Hide current picture
                object = document.getElementById('slide' + current);
                object.style.display = 'none';
                
                // Show next picture, if last, loop back to front
                if (current == last) { current = 1; }
                else { current++ }
                object = document.getElementById('slide' + current);
                object.style.display = 'block';
            }

            function previousPicture() {
                // Hide current picture
                object = document.getElementById('slide' + current);
                object.style.display = 'none';
                
                if (current == first) { current = last; }
                else { current--; }
                object = document.getElementById('slide' + current);
                object.style.display = 'block';
            }
            //]]>
            // -->
</script>

and this for html:

<div class='slideShow'>
<div id='slide1' class='slides'>
<a href='?goto=about'><img src='/images/header1.jpg'></a>
</div>
<div id='slide2' class='slides'>
<a href='?goto=class'><img src='/images/banner2.jpg'></a>
</div>
 <div class="controls">
                <a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
                <a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
            </div>

now how would i make it so it auto-plays and fades in and out?

thank you!