Simple jQuery image/banner changer

<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>

<!-- 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 -->