Código Script com fazer Banner Slideshow Personalizado

Código Script com fazer Banner Slideshow Personalizado

por adminem Programaçãoon Postado em
[caption id="attachment_2235" align="alignnone" width="644"]Código Script com fazer Banner Slideshow Personalizado Código Script com fazer Banner Slideshow Personalizado[/caption] 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;
}
 

Loading