Script Code with Making Custom Banner Slideshow

Código Script com fazer Banner Slideshow Personalizado
Script Code with Making Custom Banner Slideshow

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

<script src="https://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;
}

 

 1,166 Total Visualizações,  2 Visualizações Hoje

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.