Hii,

I had shared few example of animation effects using CSS and jQuery,This blog is continuation with my previous blogs on "animation effects" using CSS and jQuery

Learn how to create a slider in html with different animation effects using CSS and Jquery.

Go through the example below:

HTML:

<div id="slides">
    <div id="slide1" style="display:none;">
    <p>Slider1</p>
    <img style="width:940px;height:752px;" src="flower1.jpg">
    </div>
    <div id="slide2" style="display:none;"><p>Slider2</p><img style="width:940px;height:752px;" src="flower2.jpg"></div>
    <div id="slide3" style="display:none;"><p>Slider3</p><img style="width:940px;height:752px;" src="flower3.jpeg"></div>
    <div id="slide4" style="display:none;"><p>Slider4</p><img style="width:940px;height:752px;" src="flower4.jpg"></div>
    <div id="slide5" style="display:none;"><p>Slider5</p><img style="width:940px;height:752px;" src="flower5.jpeg"></div>
</div> 

CSS:

body{background-color:#B96B8D;}
#slides{margin:0 auto;text-align:center;}

jQuery:

$("#slide1").fadeIn('slow').delay(3000).fadeOut('slow');
var t2 = setTimeout(function(){
    $("#slide2").fadeIn('slow').delay(3000).fadeOut('slow');
    var t3 = setTimeout(function(){
        $("#slide3").fadeIn('slow').delay(1000).fadeOut('slow');
        var t4 = setTimeout(function(){
            $("#slide4").fadeIn('slow').delay(3000).fadeOut('slow');
            var t5 = setTimeout(function(){        
                $("#slide5").fadeIn('slow');
            }, 6000);
        }, 10000);
    }, 6000);
}, 6000);

Note: Must include this link in your file

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>