SlideShow com tarja, link e botoes de controle

[Varci Gonçalves 0]

Prezados,

Sou novo em programação e navegando pela net, encontrei um código que me atendeu quase totalmente.

O script alterna as imagens, coloca uma tarja e link na imagem, porém possui algumas miiaturas que ao clicar, muda a imagem, link e tarja.

O que eu gostaria de fazer é tirar as miniaturas e colocar botoes de controle, somente o Anterior e Proximo.

Agradeço a ajuda, segue o codigo.

 

 

<script>

// Imagens

var myPix = new Array()

myPix[0] = "foto1.jpg";

myPix[1] = "foto2.jpg";

var site=new Array();

site[0]="http....>";

site[1]="http....>";

// Tarjas

var myText = new Array()

myText[0] = "texto1";

myText[1] = "texto2";

// 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.className == "imgmenu") {

iten.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.className == "imgclick") { // busca quais imagens estão com class=imgclick

iten.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.className == "imgatual") || (iten.className == "imgclick")) {

iten.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; // exibe a imagem grande

document.getElementById("link").href= site;

borda(i); // modifica a borda nas imagens pequenas

document.getElementById('tarja').innerHTML=myText; // coloca a tarja na imagem

if (i == tam) i = -1;

i++;

}else { i = 0; }

}

window.onload = function() {

abrir();

start();

}

</script>

 

[Bergs 53]

mostra o que você já fez. onde está a dificuldade?

[Varci Gonçalves 0]

Bom dia Bergs

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.className == "imgmenu") {

iten.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.className == "imgclick") { // busca quais imagens estão com class=imgclick

iten.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.className == "imgatual") || (iten.className == "imgclick")) {

iten.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; // exibe a imagem grande

document.getElementById("link").href= site;

borda(i); // modifica a borda nas imagens pequenas

document.getElementById('tarja').innerHTML=myText; // 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>

 

 

Alguém pode me ajudar?