Slider JS

Slider JS

by Angelo Rogério Rubin

HTML

<div id="box_topo">

<img class="logo" src="http://thumbs.dreamstime.com/x/h%C3%A9lice-lustrosa-pastel-do-avi%C3%A3o-d-34705241.jpg" />

<div id="slideshow">
    <img src="http://conteudo.imasters.com.br/18509/imagem14.jpg" alt="" width="200" height="133" />
    <img src="http://thumbs.dreamstime.com/x/povos-3d-no-movimento-85881.jpg" alt="" width="200" height="133" />
</div>

</div>

CSS

<!--INICIO SLIDER-->

#slideshow {
    height:auto;
}

#slideshow IMG {
    position:absolute;
	margin:5px 5px 5px 0;
    z-index:8;
	border:2px solid #000;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}


<!--FIM SLIDER-->

#box_geral {
	width:99%;
	height:450px;
	overflow:hidden;
	border:1px solid #CCC;
}

#box_topo {
	margin:1px;
	width:99.8%;
	height:200px;
	background-color:#CCC;
}

.logo {
	margin:5px;
	border:none;
	width:200px;
	height:150px;
	float:left;
}

.banner {
	margin:5px;
	border:none;
	width:200px;
	height:150px;
	float:left;
}

JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});