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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

2º Insira no Header 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 = ["", "Material Básico", "Pagamento Facilitado", "Acabamento", "Tintas", "Elétrica", "Hidráulica"];
        html += '</span>'+ titulos[(i+1)]+'</li>';
    }
    
    html += '</ul>';
    $('#slideShow').after(html);

    $('.slide').on("click", function() {
        currentSlide = $(this).index();
        gotoSlide(currentSlide);
    });

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        gotoSlide(currentSlide);
    }

    function gotoSlide(slideNum) {
        if (slideNum !== prevSlide) {
            if (prevSlide !== null) {
                $(slides[prevSlide]).stop().hide();
                $('#slide'+prevSlide).removeClass('selectedTab');
            }
            $('#slide'+slideNum).addClass('selectedTab');
            $(slides[slideNum]).stop().slideDown(FADE_SPEED);
            prevSlide = slideNum;
            clearInterval(interval);
            interval = setInterval(nextSlide, DELAY_SPEED);
        }
    }

    nextSlide();
});
</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,
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 {
    font-size: 28px;
    font-weight: normal;
    margin: 10px 0;
}

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

Fabio Bmed

Olá! Sou Fábio Bmed — fundador da Metapax, consultoria estratégica de posicionamento e crescimento para negócios, e criador da MapexMind, um método de neuropsicologia aplicada voltado à compreensão prática da mente humana. Também sou o criador do blog FabioBmed.com.br.

Desde 2006 trabalho com tecnologia, marketing digital e análise de sistemas complexos. Mas os sistemas que mais me fascinam hoje são os que carregamos dentro da cabeça.

Estou entrando na psicologia, com foco em neuropsicologia — a ciência que explica por que você pensa, decide e se comporta do jeito que faz. Essa transição não é um desvio de rota: é a evolução natural de quem passou décadas entendendo como sistemas funcionam — e percebeu que o mais complexo de todos ainda estava por ser mapeado.

Ao longo dessa trajetória, criei dois projetos que sintetizam essa visão.

A Metapax nasceu da percepção de que negócios não crescem por acaso. Crescem quando existe uma estrutura clara de autoridade, presença e experiência do cliente. Depois de mais de duas décadas liderando operações digitais e analisando padrões de crescimento empresarial, transformei esse entendimento no Método APA — Autoridade, Presença e Atendimento — aplicado a empresas e profissionais que querem crescer com previsibilidade e posicionamento sólido.

Já a MapexMind surgiu de outro tipo de investigação: entender a arquitetura da mente humana. O projeto aplica neuropsicologia à vida real para ajudar pessoas a compreenderem padrões emocionais, cognitivos e comportamentais — próprios ou de quem amam — traduzindo conceitos complexos em clareza prática e utilizável.

No fundo, os dois projetos partem da mesma pergunta:

Como sistemas funcionam por trás da superfície?

Negócios, comportamento, decisões, relações humanas, tecnologia, marketing e mente — tudo aqui é analisado pelo mesmo prisma: estrutura, padrões e a ciência por trás de como as coisas realmente funcionam.

Este blog é o ponto de encontro dessas áreas. Um espaço onde tecnologia, psicologia, neurociência, comportamento humano, marketing e filosofia prática deixam de ser assuntos separados e passam a conversar entre si.

www.fabiobmed.com.br