0

Tenho esse código em jquery que é feito para banner com botoes numéricos (1,2,3,4...). Queria mudar a configuração para que ele possa ser usado co apenas dois botoes, o botão próximo e anterior. Sendo que os banner são dinâmicos, serão adicionados via PHP. Alguem pode me ajudar?

JQUERY

var tempoBanner = setTimeout(function(){},5);
        var quantidadeBanner = $('.n-slider').length;
        function mudaBanner(idbanner){
            clearTimeout(tempoBanner);
            $('.slider').stop();
            $('.slider').animate({marginLeft:-((idbanner -1)*990)},500);
            $('.slider').css("width", (quantidadeBanner*990)+"px");

            tempoBanner = setTimeout(function(){
                if(idbanner==quantidadeBanner){
                    idbanner=0;
                }
                mudaBanner(idbanner+1);
            },5000);
        }

        $(document).ready(function(){
            mudaBanner(1);
        });

HTML

<div id="banner">
        <div class="dados" style="overflow: hidden;">
            <div style="width:999999px; height:480px; margin-left:0px;" class="slider">

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="1.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo</div>
                        <div class="conteudo">conteudo</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="2.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo 2</div>
                        <div class="conteudo">conteudo 2</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="3.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo 3</div>
                        <div class="conteudo">conteudo 3</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

            </div>
            <div class="mover-dados">
                <div class="ant">Anterior</div>
                <div href="#" class="prox">Proximo</div>
            </div>
        </div>
    </div>
2
  • Não compreendo a tua duvida... "botões numéricos"? podes explicar melhor? o código que colocaste é já uma tentativa de nova abordagem ou é o que tens a funcionar?
    – Sergio
    9/07/2015 às 14:39
  • Samuel, existem inúmeras soluções de banners prontos na internet, por que você não usa uma delas? 9/07/2015 às 16:54

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .