Simple jQuery image/banner changer

This is simple image slider that change images/banners with fade effect in declared interval.

HTML:

<div class="swrapper">
    <div id="slider">
         <a href="#" target="_blank"><img id="1" src="baner_new_site_bg.png"></a>
         <a href="#" target="_blank"><img id="2" src="banner.png"></a>
    </div>
</div>

Code after including jQuery library:

<!-- HEADER SLIDER -->  
<script>
jQuery(function () {
    var count = jQuery("#slider > a > img").length;
    var slider = 1;
    var speed=7000;
    var fadeSpeed = 300;
    var loop;
    start();    
    
    jQuery("#1").fadeIn(fadeSpeed);
    jQuery('#slider').hover(stop,start);
    
    function start(){
        loop = setInterval(next, speed);
    }
    
    function stop(){
        clearInterval(loop);
    }
    
    function next() { 
        slider++;
        if (slider > count) {
            slider = 1;
        }

        jQuery("#slider > a > img").fadeOut(fadeSpeed);
        jQuery("#" + slider).fadeIn(fadeSpeed);
    }
});
</script>
<style>
.swrapper {    position:relative;   }
#slider {    height:200px;}
#slider img {    width:966px;    height:149px;    display:none;    position:absolute;}
</style>    
<!-- END HEADER SLIDER -->

Keep in mind that if you need more images, you will need to put ID on them too. Otherwise they will not show.

For my task I just needed simple image changer. You can easily modify it to a real slideshow slider with navigation or something similar.

Leave a Reply

Your email address will not be published. Required fields are marked *