Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

_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
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