How to make slide show using 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>

Most Popular

Connect to Amazon EC2 instance using Filezilla and SFTP

Image
Hello friends this tutorial help you how to connect AWS EC2 instance using Filezilla and SFTP. First you need to have .pem file. This .pem file is created when you are creating a new instance in your AWS account. Follow below steps to connect AWS EC2 instance. 1. Start Filezilla. Goto preference ->connection->SFTP 2. Add .pem file then you will get prompt to convert .pem file. 3. Save with same name. 4. Add Host address. You will get public ip from AWS EC2 instance. 5. Username ec-2 or ubuntu. Username you will find in connect tab. 6. Port : 22 7. Connect. 8. Finish.
Keep reading

Pan Card Validation Using Javascript

To Validate PanCard you have to use below function  function ValidatePAN(Obj) {            if (Obj.value != "") {             ObjVal = Obj.value;             var panPat = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;             if (ObjVal.search(panPat) == -1) {                 alert("Invalid Pan No");                 Obj.focus();                 return false;             }         }   } <input type="text" ID="textPanNo" MaxLength="10" onblur="ValidatePAN(this);">
Keep reading

Customize wordpress register form wp_register()

<div>             <h3>Register for this site!</h3>             <p>Sign up now for the good stuff.</p>             <form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form">                 <div class="username">                     <label for="user_login"><?php _e('Username'); ?>: </label>                     <input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />                 </div>                                <div class="password">                     <label for="user_email"><?php _e('Your Email'); ?>: </label>                     <input type="text"
Keep reading