JQuery Slider with table and image

Question

I am new to jQuery. So I don't know how to perfectly fix this, but here I have a row full of images, I need to make it run in a infinite loop like a slider. Have searched many places, but had to return with disappointment. How do I make this work?

<table id="boxes" style="border: 1px solid #666;">
   <tr>
       <td>
           <img src="images/image1.jpg" width="173" height="110" class="imgborder" />           
           <img src="images/image2.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image3.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image4.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image5.jpg" width="173" height="110" class="imgborder" />    
           <img src="images/image6.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image7.jpg" width="173" height="110" class="imgborder" />
       </td>
   </tr>
</table>

Answer 1

Try jQuery Cycle. It's the simpliest I know. http://jquery.malsup.com/cycle/

Answer 2

I think a plugin would be a good idea. If you want the row of images to scroll like a stock ticker, you can use something like jQuery SimpleScroll . If you want a standard slideshow you could try a lightweight image slider like Nivo Slider

Answer 3

If you don't want to use any plugin then try this simple jQuery Slider

<style type="text/css">
    #boxes img {
        display: none;
    }

    #boxes .active {
        display: block !important;
    }
</style>

<table id="boxes" style="border: 1px solid #666;">
    <tr>
        <td> <img src="res/i/img.jpg" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/ajax-loader.gif" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/yellowspike.gif" width="173" height="110" class="imgborder" /> </td>
    </tr>
</table>
<script src="res/js/rvmp_admin/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#boxes img:first").addClass('active');
        setInterval(function() {
            InitializeSlider();
        }, 3000);

        function InitializeSlider() {
            if($("#boxes img").hasClass('active')) {
                var nextImg;
                if(($("#boxes .active").index() + 1) == $("#boxes img").length) {
                    nextImg = $("#boxes img:first");
                } else {
                    nextImg = $("#boxes .active").next();
                }
                $("#boxes .active").hide("slow").removeClass("active");
                nextImg.addClass('active');
            } else {
                $("#boxes img:first").addClass('active');
            }
        }
    });
</script>