I'm a bit o a noob so any help would be great...

What I need to do is have it so that the div associated to a specific li can change on hover as well as automatically change on a timer so that it scrolls through the option.

here is my code:

<script type="text/javascript">
    $(function () {
        $("#switches li").mouseover(function () {
        var $this = $(this);
            $("#slides div").hide();
            $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        });
    });
</script>


<div id="featured">
<ul id="switches">
    <li id="switch1"><a href="activity_spa.html">Spa &amp; Wellness</a></li>
    <li id="switch2"><a href="#">Gala Venues</a></li>
    <li id="switch3"><a href="#">Dining</a></li>
    <li id="switch4"><a href="#">Shopping</a></li>
    <li id="switch5"><a href="#">Golf</a></li>
    <li id="switch6"><a href="#">Team Building</a></li>
    <li id="switch7"><a href="#">Equestrian</a></li>
</ul>

<div id="slides">
    <div id="slide1"><img src="images/image2.jpg" alt="" /></div>
    <div id="slide2" style="display:none;"><img src="images/image6.jpg" alt="" /></div>
    <div id="slide3" style="display:none;"><img src="images/image1.jpg" alt="" /></div>
    <div id="slide4" style="display:none;"><img src="images/image3.jpg" alt="" /></div>
    <div id="slide5" style="display:none;"><img src="images/image5.jpg" alt="" /></div>
    <div id="slide6" style="display:none;"><img src="images/image7.jpg" alt="" /></div>
    <div id="slide7" style="display:none;"><img src="images/image4.jpg" alt="" /></div>
</div>
</div>