How to make slide show using jquery?

By December 28, 2011 Jquery
styles

<style>
body {
   
    font-family:arial;
}
ul#nav {
    list-style-type:none;
    margin:10px 0 10px;
    padding:0;
}
ul#nav li {
    float:left;
    width:30px;
}
ul#nav li a {
    text-decoration:none;
    background:#05609A;
    color:#fff;
    padding:5px;
}

ul#nav li a.active {
    background:#B4F114;
}
.slide-image {
    width:400px;
    height:300px;
    border:2px solid #05609A;
    overflow:hidden;
}

.slide-image img{
   
}

Head
You can find jquery.innerfade.js in google.
<head>
 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>
 <script src=”jquery.innerfade.js” type=”text/javascript”></script>
 <script type=”text/javascript”>
    $(document).ready(function(){
        var slideArray = [“ansel_adams1.jpg”, “ansel_adams2.jpg”, “ansel_adams3.jpg”, “ansel_adams4.jpg”, “ansel_adams5.jpg”];
        var imgDir = ‘images/ansel_adams’;
       
        $(‘.container’).append(‘<div class=”slide-image”></div>’);
       
        $(‘.slide-image’).after(‘<ul id=”nav”></ul>’);
       
        var slideLength = slideArray.length;
        for(i=0; i < slideLength; i++){
            var slideText = i + 1;
            $(‘#nav’).append(‘<li><a href=”#” rel=”‘+slideText+'”>’+slideText+'</a></li>’);
            $(‘.slide-image’).append(‘<img src=”‘+imgDir + slideText+’.jpg”/>’);
        }
       
        $(‘#nav li a’).bind(‘click’, function(){
            var numSlide = $(this).attr(‘rel’);           
            $(‘.slide-image’).html(‘<img src=”‘+imgDir + numSlide+’.jpg”/>’);           
        });
       
        $(‘.slide-image’).innerfade({ speed: ‘slow’, timeout: 4000, type: ‘sequence’, containerheight: ‘220px’ });
    });
   
 </script>
</head>

<body>       
<div class=”container”>
    <h1>jQuery Images gallery by Ikhlaque.</h1>
</div>
</body>