How to slide <li>

[Darren_RSA]

I got a section on my website that when a user clicks the next/previous buttons, a <div> will change between the different <li> contents. I need this to happen automatically as well.

JavaScript:

<script type="text/javascript">

    function previous() {

        var current_image = $("#img-list li.active");
        var next_image = current_image.prev();
        if (next_image.length == 0) {
            next_image = $("#img-list li:last");
        }
        current_image.removeClass("active");
        next_image.addClass("active");
       
    }

    function next() {

        var current_image = $("#img-list li.active");
        var next_image = current_image.next();
        if (next_image.length == 0) {
            next_image = $("#img-list li:first");
        }
        current_image.removeClass("active");
        next_image.addClass("active");
        
    }

    </script>

HTML:

<div class="wrapper col2">
  <div id="featured_slide">
    <div id="featured_content">
      <ul id="img-list">
        <li class="active list-item"><img src="image1.jpg" alt=""/>
          <div class="floater">
            <p>Text</p>
          </div>
        </li>
        <li class="list-item"><img src="image2.jpg" alt="" />
          <div class="floater">
            <p>Text</p>            
          </div>
        </li>
        <li class="list-item"><img src="image3.jpg" alt="" />
          <div class="floater">
              <p>Text</p>
          </div>
        </li>
            <li class="list-item"><img src="image4.jpg" alt="" />
          <div class="floater">
              <p>Text</p>
          </div>
        </li>
      </ul>
    </div>
    <a href="javascript:previous();" id="featured-item-prev"><img src="images/prev.png" alt=""  /></a>
    <a href="javascript:next();" id="featured-item-next"><img src="images/next.png" alt="" /></a> 
    </div>    
</div>