Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 2
Sexo: Masculino

Slideshow com tarja, link e botoes de comando

13-05-2013 12:46

Estou aprendendo sobre scripts, e criando um slideshow, preciso colocar as opções de anterior e proximo, nas exibições das imagens.
O codigo que tenho, mostra as imagens a intervalos, exibe um texto referente a imagem (tarja) e coloquei a url também. Uma parte do codigo exibe as miniaturas das imagens e ao clicar sobre as mesmas, a foto é ampliada e depois o slide continua.
Mas eu gostaria de remover as miniaturas e colocar as opções de anterior e proximo. Testei algumas opções de outros codigos mas não obtive sucesso.
Meu código é o seguinte.

<script> // Imagens var myPix = new Array(6) myPix[0] = "<%=foto1%>"; myPix[1] = "<%=foto2%>"; myPix[2] = "<%=foto3%>"; myPix[3] = "<%=foto4%>"; myPix[4] = "<%=foto5%>"; myPix[5] = "<%=foto6%>"; myPix[6] = "<%=foto7%>";   var site=new Array(6); site[0]="vista.asp?cod=<%=foto1%>"; site[1]="vista.asp?cod=<%=foto2%>"; site[2]="vista.asp?cod=<%=foto3%>"; site[3]="vista.asp?cod=<%=foto4%>"; site[4]="vista.asp?cod=<%=foto5%>"; site[5]="vista.asp?cod=<%=foto6%>"; site[6]="vista.asp?cod=<%=foto7%>";   // Tarjas var myText = new Array(6) myText[0] = "<%=texto1%>"; myText[1] = "<%=texto2%>"; myText[2] = "<%=texto3%>"; myText[3] = "<%=texto4%>"; myText[4] = "<%=texto5%>"; myText[5] = "<%=texto6%>"; myText[6] = "<%=texto7%>";   // Variáveis   var timer = "4000"; // tempo, em milésimos de segundos var i = 1; // não mexer. var intervalo; // criada variável global da animação   function start() { intervalo = window.setInterval("change()",timer); // Inicia a animação document.getElementById(0).className = "imgatual";   }   // Função quando clica na imagem pequena exibe ela grande. function abrir() { var main = document.getElementById("exibicao"); var iten = main.getElementsByTagName("img"); if (iten) { for (var i=0;i<iten.length;i++) { if (iten[i].className  == "imgmenu") { iten[i].onclick = function() { // quando clicar na imagem executar os comandos limpa(); // função limpa this.className = "imgclick"; // coloca borda do click document.getElementById("image").src = 'fotos/' + myPix[this.id]; // exibe a imagem grande document.getElementById("tarja").innerHTML = myText[this.id]; // coloca a tarja   } } } } }   // Função que limpa as bordas que estão com class=imgclick function limpa() { var main = document.getElementById("exibicao"); var iten = main.getElementsByTagName("img"); if (iten) { for (var i=0;i<iten.length;i++) { if (iten[i].className  == "imgclick") { // busca quais imagens estão com class=imgclick iten[i].className = "imgmenu"; // as quais forem muda para imgmenu } } } }   function borda() { var img = arguments[0]; // recebe o por parametro a ID da imagem var main = document.getElementById("exibicao"); var iten = main.getElementsByTagName("img"); if (iten) { for (var i=0;i<iten.length;i++) { // aqui modifica a borda da imagem que está com a class=igmatual ou class="imgclick" para imgmenu if ((iten[i].className  == "imgatual") || (iten[i].className == "imgclick")) { iten[i].className = "imgmenu"; } } document.getElementById(img).className = "imgatual"; // aqui coloca a borda na imagem atual } }   // Função que exibe a imagem grande! function change() { var tam = myPix.length; if (i < tam) { document.getElementById("image").src = 'fotos/' + myPix[i]; // exibe a imagem grande document.getElementById("link").href= site[i]; borda(i); // modifica a borda nas imagens pequenas document.getElementById('tarja').innerHTML=myText[i]; // coloca a tarja na imagem if (i == tam) i = -1; i++; }else { i = 0; } }   window.onload = function() { abrir(); start(); } </script>


<div id="exibicao"><CENTER> <table align="center"> <tr> <td  nowrap="nowrap" width="1020"><a href="vista.asp?cod=<%=foto1%>" id="link"><img  id="image" src="fotos/<%=foto1%>" width='1020' height='576' border="0" style="margin:0 10px 0px 0px;"></a>   </td> </tr> <tr> <td  align="center" valign="middle"><BR><center> <TABLE  BORDER="0" align="center"><center> <TR> <TD width="65"><img class="imgmenu" id="0" src="fotos/<%=foto1%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="1" src="fotos/<%=foto2%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="2" src="fotos/<%=foto3%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="3" src="fotos/<%=foto4%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="4" src="fotos/<%=foto5%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="5" src="fotos/<%=foto6%>" width='65' height='65'></TD> <TD width="65"><img class="imgmenu" id="6" src="fotos/<%=foto7%>" width='65' height='65'></TD> </TR>  </TABLE>  </td> </tr>  </table> </div>

MOVIDO PARA JAVASCRIPT
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Slideshow com tarja, link e botoes de comando

13-05-2013 17:18

Fazer tudo manualmente é complicado. Existe alguns plugins em jQuery já pronto, que fazem o que você precisa. É só baixar o script, e alterar texto e foto.

Busca na net por: slideshow jQuery, vai encontrar diversas opções.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado