Função Voltar Urgente

ZS Online · Fevereiro 5, 2008

Gente eu tenho um sistema de slide que tem esse codigo para avançar entre os slides só que preciso de um pra poder voltar também como faço???

segue a função pra avançar

function nextSlide() {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
if (divs[i].className == 'visible') {
divs[i].className = 'hidden';
$('link' + (i + 1)).className = 'inativo'
i = (i == divs.length - 1) ? 0 : i + 1;
divs[i].className = 'visible';
$('link' + (i + 1)).className = 'ativo'
break;
}
}
}

se alguém puder me ajudar eu agradeço

Editado Fevereiro 5, 2008 por fercosmig
Utilize as tags de código, facilitam a visualização.

KaKarotto · Fevereiro 5, 2008

Opa,

tem como passar o html?

A função não tem comentários, não da pra saber o que ela faz direito. A maior parte da função dá pra entender, mas existem umas partes que não dá pra saber se não vir o html.

Akeleabrassss

ZS Online · Fevereiro 5, 2008

segue o html preciso por um botao voltar e um avançar pra avançar ta tranquilo o prob é voltar


<style>
        <!--
            * {
                margin: 0;
                list-style: none;
                text-decoration: none;
                font-family: Verdana, Arial, Helvetica, Sans-Serif;
            }
            div#slideshow {
                height: 200px;
                width: 215px;
           }
            div#slideshow #links {
                float: right;
                clear: both;
                width: 10%;
                text-align: center;
            }
            div#slideshow #links li {
                font-size: 12px;
                border-top: 1px solid white;
                line-height: 40px;
            }
            div#slideshow #links li.inativo {
                background: #EEEEEE;
            }
            div#slideshow #links li.ativo {
                background: #D9D9D9;
            }
            div#slideshow #slides {
                background: #FFFFFF;
                height: 100%;
                color: white;
                font-size: 14px;
            }
            div#slideshow #slides .visible {
                display: block;
            }
            div#slideshow #slides .hidden {
                display: none;
            }
            div#slideshow #slides div span {
                display: block;
            }
            div#slideshow #slides .titulo{
                font-weight: bold;
                font-size: 16px;
                padding: 5px 0 0 5px;
            }
            div#slideshow #slides .conteudo {
                padding: 0 0 0 5px;
            }
.style1 {color: #18A4E7}
        -->
        </style>
        <script type="text/javascript">
            var tempo;
            var intervalo = 2000; //Intervalo entra as mudanças de slides. Definido em milisegundos.
            function $(campo) {
                return document.getElementById(campo);
            }
            //Trecho de código criado por Wilker, pego em http://forum.imasters.com.br/index.php?s=&...st&p=660522
            var $A = Array.from = function(iterable) {
                if (!iterable) return [];
                if (iterable.toArray) {
                    return iterable.toArray();
                } else {
                    var results = [];
                    for (var i = 0; i < iterable.length; i++)
                        results.push(iterable[i]);
                    return results;
                }
            };
            Function.prototype.bind = function() {
                var __method = this, args = $A(arguments), object = args.shift();
                return function() {
                    return __method.apply(object, args.concat($A(arguments)));
                };
            };
            //Fim do trecho de código criado por Wilker
            function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em http://www.onlinetools.org/articles/unobtr...t/chapter4.html
                if (typeof obj == "string") {
                    if (null == (obj = document.getElementById(obj))) {
                        throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
                    }
                }
                if (obj.attachEvent) {
                    return obj.attachEvent(("on" + evType), fn);
                } else if (obj.addEventListener) {
                    return obj.addEventListener(evType, fn, true);
                } else {
                    throw new Error("Seu browser não suporta adição de eventos.");
                }
            }
            function nextSlide() {
                var divs = $('slides').getElementsByTagName('div');
                var i;
                for (i = 0; i < divs.length; i++) {
                    if (divs[i].className == 'visible') {
                        divs[i].className = 'hidden';
                        $('link' + (i + 1)).className = 'inativo'
                        i = (i == divs.length - 1) ? 0 : i + 1;
                        divs[i].className = 'visible';
                        $('link' + (i + 1)).className = 'ativo'
                        break;
                    }
                }
            }
            function voltaSlide() {
                var divs = $('slides').getElementsByTagName('div');
                var i;
                for (i = 0; i < divs.length; i++) {
                    if (divs[i].className == 'visible') {
                        divs[i].className = 'hidden';
                        $('link' + (i + 1)).className = 'inativo'
                        i = (i == divs.length - 1) ? 0 : i + 1;
                        divs[i].className = 'visible';
                        $('link' + (i + 1)).className = 'ativo'
                        break;
                    }
                }
            }			
            function init() {
                var as = $('links').getElementsByTagName('a');
                var i;
                for (i = 0; i < as.length; i++) {
                    var f = function(v) {
                        setSlide(as[v]);
                    }
                    addEvent(as[i], 'click', f.bind(this, i));
                }
                tempo = setInterval('nextSlide()', intervalo);
            }
            function setSlide(link) {
                var divs = $('slides').getElementsByTagName('div');
                var i;
                for (i = 0; i < divs.length; i++) {
                    divs[i].className = 'hidden';
                }
                var lis = $('links').getElementsByTagName('li');
                for (i = 0; i < lis.length; i++) {
                    lis[i].className = 'inativo';
                }
                link.parentNode.className = 'ativo';
                i = parseInt(link.firstChild.data);
                $('slide' + i).className = 'visible';
                clearInterval(tempo);
            }
            addEvent(window, 'load', init);
        </script>

</head>

<body>
<table width="1%" border="0" cellspacing="5" bgcolor="#FFFFFF">
  <tr>
    <td><table width="100%" border="0" cellspacing="10" bgcolor="#18A4E7">
      <tr>
        <td bgcolor="#FFFFFF">
		<div id="slideshow" name="slideshow">
            <div id="links" name="links" style="visibility:hidden; position:absolute">
                <ul>
                    <li id="link1" name="link1" class="ativo"><a href="#">1</a></li>
                    <li id="link2" name="link2" class="inativo"><a href="#">2</a></li>
                    <li id="link3" name="link3" class="inativo"><a href="#">3</a></li>
                    <li id="link4" name="link4" class="inativo"><a href="#">4</a></li>
                    <li id="link5" name="link5" class="inativo"><a href="#">5</a></li>
                </ul>
            </div>		
          <div id="slides" name="slides">
              <div id="slide1" name="slide1" class="visible">
                <table width="25%" border="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <td align="center"><a href="#"><img src="admin/<?=$fot?>" width="213" height="159" /></a></td>
                  </tr>

                  <tr>
                    <td><table width="100%" border="0" cellspacing="0">
                        <tr>
                          <td width="6%" rowspan="2"><a href="java script://" onClick="voltaSlide();"><img src="imagens/cinza-left12.gif" width="13" height="14" border="0"></a></td>
                          <td width="87%" class="style19"><a href="<?=$link?>" class="style19"><?=$tit?></a></td>
                          <td width="7%" rowspan="2"><a href="java script://" onClick="nextSlide();"><img src="imagens/cinza-righ2t.gif" width="13" height="14" border="0"></a></td>
                        </tr>
                        <tr>
                          <td class="txt_azul_peq"><?=$txt?></td>
                          </tr>
                      </table></td>
                  </tr>
                </table>
              </div>
            <div id="slide2" name="slide2" class="hidden">
                <table width="25%" border="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <td align="center"><a href="#"><img src="../admin/fotos/0edeafc22947def1579a312c865cf12e.jpg" width="213" height="159" /></a></td>
                  </tr>
                  <tr>
                    <td><span class="style19"><strong>Titulo2</strong></span></td>
                  </tr>
                  <tr>
                    <td><p class="txt_azul_peq">Teste.. Teste.. Teste.. Teste..<br />
                      Teste.. Teste.. Teste.. <br />
                    </p></td>
                  </tr>
                </table>
            </div>
            <div id="slide3" name="slide3" class="hidden">
                <table width="25%" border="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <td align="center"><a href="#"><img src="../admin/fotos/4d4207927380846481282cb6cbd34112.jpg" width="213" height="159" /></a></td>
                  </tr>
                  <tr>
                    <td><span class="style19"><strong>Titulo3</strong></span></td>
                  </tr>
                  <tr>
                    <td><p class="txt_azul_peq">Teste.. Teste.. Teste.. Teste..<br />
                      Teste.. Teste.. Teste.. <br />
                    </p></td>
                  </tr>
                </table>
            </div>
            <div id="slide4" name="slide4" class="hidden">
                <table width="25%" border="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <td align="center"><a href="#"><img src="../admin/fotos/2c3bd9ddf6c66f9328150e372aefdd60.jpg" width="213" height="159" /></a></td>
                  </tr>
                  <tr>
                    <td><span class="style19"><strong>Titulo4</strong></span></td>
                  </tr>
                  <tr>
                    <td><p class="txt_azul_peq">Teste.. Teste.. Teste.. Teste..<br />
                      Teste.. Teste.. Teste.. <br />
                    </p></td>
                  </tr>
                </table>
            </div>
            <div id="slide5" name="slide5" class="hidden">
                <table width="25%" border="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <td align="center"><a href="#"><img src="../admin/fotos/3f4b32634a5dbc3a85de27ad737b8257.JPG" width="213" height="159" /></a></td>
                  </tr>
                  <tr>
                    <td><span class="style19"><strong>Titulo5</strong></span></td>
                  </tr>
                  <tr>
                    <td><p class="txt_azul_peq">Teste.. Teste.. Teste.. Teste..<br />
                      Teste.. Teste.. Teste.. <br />
                    </p></td>
                  </tr>
                </table>
            </div>
          </div>
        </div></td>
      </tr>
    </table></td>
  </tr>
</table>
[/CODEBOX]

Editado Fevereiro 5, 2008 por ZS Online

KaKarotto · Fevereiro 6, 2008

É cara....infelizmente eu não vou poder ajudar. Não sei se estou perdendo meu toque com Javascript ou se esse povo anda fazendo scripts complicados demais para tarefas tão simples.

De boa, eu de você procurava outro script de slides que na net ta lotado. Acho muito dificil mexer nesse aí. O cara usa um monte de coisa que meu...não é necessário mesmo. Acho que esse negocio de frameworks ta mexendo com a mente da galera, aí é um tal de usar prototype aqui, prototype ali... Nesse codigo ele adiciona um método novo ao tipo array sem precisar...só pra usar prototype eu acho..

Sinto muito, dessa vez não posso ajudar.

Abraço

Entrar

Função Voltar Urgente

Pergunta

ZS Online

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

ZS Online

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades