Create a Simple Image Slide Show using jQuery

8:11:00 AM |

Here’s what I came up with 5 lines of jQuery code. The images have been added to a ‘images’ folder kept at the root. The images has been defined in an array which can be retrieved from a server. For simplicity sake, I have harcoded the images paths, however the script functionality can adapt dynamically to the number of images in the array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="">
    <title>Simple Slide Show with jQuery</title>
    <script type='text/javascript'
    <script type="text/javascript">
        var imgs = [
        var cnt = imgs.length;

        $(function() {
            setInterval(Slider, 3000);

        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
    <img id="imageSlide" alt="" src="" />
The code is not perfect but will give you an idea of how to extend this sample to suit your own requirements.