Ir para conteúdo
_M!K0L_

Banner rotativo (SIMPLES)

Por , em Javascript

Recommended Posts

egalauber    0

egalauber
Postado

Esse tutorial tem um probleminha no temporizador que não estou conseguindo resolver.

O setInterval define 3 segundos pra chamar o método -- setInterval("mudaImg()", 3000); --

Se uma imagem já está rodando a 2 segundos e eu clico em outra imagem, essa imagem clicada fica só 1 segundo que é o tempo restante dos 3 segundos.

Isso porque o evento -- onclick="mudaImg('2');" -- chama direto a função sem resetar o tempo do setInterval.

 

Tentei resolver isso de 2 maneiras, mas nenhuma funcionou:

 

A primeira foi colocar o setInterval dentro do onclik -- onclick="setInterval('mudaImg('2')', 3000); "

Deu errado.

 

a segunda foi fazer uma função chamando o setInterval novamente:

function chamalink(j){

setInterval("mudaImg(j)", 3000);

}

 

onclick="chamalink('2');"

 

Deu errado também.

 

Alguém tem uma solução?

Compartilhar este post

Link para o post
Compartilhar em outros sites

egalauber    0

egalauber
Postado

Consegui resolver o problema do temporizador usando o setTime out dentro de um loop.

Acrescentei também uma barra de progresso e um menu de navegação.

Acho que deu tudo certo.

Vejam o código:

 

<body onload="start();">

 

<div id="noticias">

Notícias
<div id="_1"></div>

<div id="_2"></div>

<div id="_3"></div>

<div id="_4"></div>

<div id="capa_barra_de_progresso">
<div id="barra_de_progresso"></div>
</div>

<div id="capa_menu_noticias">
<input class="btnoticias" id="btn1" type="button" value="1" onclick="chama1()" />
<input class="btnoticias" id="btn2" type="button" value="2" onclick="chama2()" />
<input class="btnoticias" id="btn3" type="button" value="3" onclick="chama3()" />
<input class="btnoticias" id="btn4" type="button" value="4" onclick="chama4()" />
</div>

</div> <!--Fecha a div noticias-->


<style type="text/css">

#noticias {
        width:564px;
        height:280px;
        float:left;
        margin-top:20px;
        margin-left:20px;
        font-size:20px;
    }

.btnoticias {
        border-radius:15px;
        background:#B20000;
        width:30px;
        height:30px;
        border:solid 2px #000000;
        color:#FFF;
    }

.btnoticias:hover {
        background:#FFBFBF;
    }

#btn1 {
        border: solid 2px #007FFF;
    }

#capa_barra_de_progresso {
        width:540px;
        margin:auto;
        text-align:center;
        padding-top:2px;
        padding-bottom:2px;
        height:7px;
    }

#barra_de_progresso {
        height:3px;
        background:#000;
        margin-bottom:2px;
        float:left;
    }

#capa_menu_noticias {
        width:540px;
        margin:auto;
        text-align:center;
        padding-top:2px;
        padding-bottom:2px;
    }

#_1 {
        width:540px;
        margin:auto;
        margin-top:5px;
        height:200px;
        visibility:visible;
        background:#090;
    }

#_2 {
        width:540px;
        margin:auto;
        height:0px;
        visibility:hidden;
        background:#FF0;
    }

#_3 {
        width:540px;
        margin:auto;
        height:0px;
        visibility:hidden;
        background:#06F;
    }

#_4 {
        width:540px;
        margin:auto;
        height:0px;
        visibility:hidden;
        background:#900;
    }

</style>

 

<script type="text/javascript">

    var progresso = new Number();
    var maximo = new Number();
    var progresso = 0;
    var maximo = 540;
    var i = 1;
    
    function start(){
        
        if(i < 4) {
                    
            if((progresso + 1) <= maximo){
                progresso = progresso + 1;
                    
                    document.getElementById("barra_de_progresso").style.width = progresso+"px";
                    
                    setTimeout("start();", 15);
            } else {
                i++;
            progresso = 0;
            maximo = 540;
            
            document.getElementById("_1").style.height = "0px";
            document.getElementById("_1").style.visibility = "hidden";
            document.getElementById("_1").style.marginTop = "0px";
            document.getElementById("btn1").style.border = "solid 2px #000000";
            document.getElementById("_2").style.height = "0px";
            document.getElementById("_2").style.visibility = "hidden";
            document.getElementById("_2").style.marginTop = "0px";
            document.getElementById("btn2").style.border = "solid 2px #000000";
            document.getElementById("_3").style.height = "0px";
            document.getElementById("_3").style.visibility = "hidden";
            document.getElementById("_3").style.marginTop = "0px";
            document.getElementById("btn3").style.border = "solid 2px #000000";
            document.getElementById("_4").style.height = "0px";
            document.getElementById("_4").style.visibility = "hidden";
            document.getElementById("_4").style.marginTop = "0px";
            document.getElementById("btn4").style.border = "solid 2px #000000";
            document.getElementById("_"+i).style.height = "200px";
            document.getElementById("_"+i).style.visibility = "visible";
            document.getElementById("_"+i).style.marginTop = "5px";
            document.getElementById("btn"+i).style.border = "solid 2px #007FFF";
                        
            start();
            
            } //fecha o else do if((progresso + 1) <= maximo)
             } else {
                    i = 0;
                    start();
                }
        }

function chama1(){
    progresso = 540;
    i = 0;
    }

function chama2(){
    progresso = 540;
    i = 1;
    }

function chama3(){
    progresso = 540;
    i = 2;
    }

function chama4(){
    progresso = 540;
    i = 3;
    }

</script>


</body>
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito