Wednesday 10 April 2013

Simple image Slider in Jquery


JS

Use JQuery and Jquery.ui

$(window).load(function () {
            var v = $("img");
            setInterval(function () {
                $('#dvContain :nth-child(1)').next()
   .show("bounce",  500)
   .end()
   .hide("explode", 1000)
   .appendTo('#dvContain');
            }, 2500);

        });

CSS
   <style type="text/css">
        #dvContain
        {
            height: 200px;
            width: 300px;
            overflow: hidden;
            padding: 0;
        }
       
        #dvContain img
        {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        #dvContain img.firstslide
        {
            display: block;
        }
    </style>

HTML
<div id="dvContain">
           <img src="Images/Chrysanthemum.jpg" width="300" height="200"   
                     class="firstslide" />
            <img src="Images/Desert.jpg" width="300" height="200" />
            <img src="Images/Hydrangeas.jpg" width="300" height="200" />
            <img src="Images/Jellyfish.jpg" width="300" height="200" />
  </div>