Código Script com fazer Banner Slideshow Personalizado

Código Script com fazer Banner Slideshow Personalizado
Código Script com fazer Banner Slideshow Personalizado

1º Insira no seu Header uma chamada ao arquivo JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

2º Ainda no seu Header, insira o Script que irá criar as cenas do banner e fazer o efeito:

<script type="text/javascript">

$(document).ready(function() {
$('#slideShowItems div').hide().css({position:'absolute',width:'645px'});
var currentSlide = -1;
var prevSlide = null;
var slides = $('#slideShowItems div');
var interval = null;
var FADE_SPEED = 500;
var DELAY_SPEED = 5000;
var html = '<ul id="slideShowCount">'
for (var i = slides.length - 1;i >= 0 ; i--){
html += '<li id="slide'+ i+'" class="slide"><span><img src="imagens/banner_imagem_0'+(i+1)+'.jpg" width="91" height="66" />' ;
var titulos = new Array()
titulos[1] = "Material Básico";
titulos[2] = "Pagamento Facilitado";
titulos[3] = "Acabamento";
titulos[4] = "Tintas";
titulos[5] = "Elétrica";
titulos[6] = "Hidráulica";
html+= '</span>'+ titulos[(i+1)]+'</li>' ;
}
html += '</ul>';
$('#slideShow').after(html);
for (var i = slides.length - 1;i >= 0 ; i--){
$('#slide'+i).bind("click",{index:i},function(event){
currentSlide = event.data.index;
gotoSlide(event.data.index);
});
};
if (slides.length <= 1){
$('.slide').hide();
}
nextSlide();
function nextSlide (){
if (currentSlide >= slides.length -1){
currentSlide = 0;
}else{
currentSlide++
}
gotoSlide(currentSlide);
}
function gotoSlide(slideNum){
if (slideNum != prevSlide){
if (prevSlide != null){
$(slides[prevSlide]).stop().hide();
$('#slide'+prevSlide).removeClass('selectedTab');
}
$('#slide'+currentSlide).addClass('selectedTab');
$('#slide'+slideNum).addClass('selectedTab');
$('#slide'+prevSlide).removeClass('selectedTab');
$(slides[slideNum]).stop().slideDown(FADE_SPEED,function(){
$(this).css({opacity:1});
if(jQuery.browser.msie){
this.style.removeAttribute('filter');
}
});
prevSlide = currentSlide;
if (interval != null){
clearInterval(interval);
}
interval = setInterval(nextSlide, DELAY_SPEED);
}
}
});
</script>

3º Insira no seu arquivo estilo.css a formatação do seu banner slideshow

/* SLIDE */
div#slideShowItems{
height:263px;
overflow:hidden;
position:relative;
}

div#slideShowItems div{
width:635px;
}

div#slideShowItems img {
margin:0 0 0 15px;
float:right;
}

ul#slideShowCount{
margin:0px;
padding:0px;
width:645px;
}
ul#slideShowCount li.slide{
float:right;
cursor:pointer;
width:100px;
height:110px;
display:block;
background: #f2f2f2;
text-align:center;
padding:5px 0 0 0;
margin:0 3px;
font-weight:bold;
font-size:12px;
}

ul#slideShowCount li.slide:hover{
background:#E5E5E5;
color:#666;
}

ul#slideShowCount li.slide.selectedTab{
background:#E5E5E5;
color:#666;
}
div#slideShow{
display:block;
background:#f3f3f3;
width:635px;
margin:0 0 10px;
padding:0 0 0 10px;
}

div#slideShow h2{
background:none !important;
font-size:28px;
font-weight:normal;
margin:10px 0 ;
height:auto !important;
}

div#slideShow p{
margin:0 0 0 10px;
height:auto !important;
}

div#slideShow h3{
margin:0 0 0 10px;
}