Ir para conteúdo

Arquivado

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

SempreCaminhando

Slide Show manual | Tá f*** kkkk

Por , em Javascript

Recommended Posts

SempreCaminhando    0

SempreCaminhando
Postado

Bom dia Srs.

 

Eu estou quase arrancando meus cabelos, por algo simples.

 

Então, eu estou tentando criar um slide show do zero, ou seja mudar a imagem com click do botão.

 

Até certo ponto eu me dei bem.

 

Eu quero que quando chegue na última foto e click no botão voltar, independente de quantas vezes eu clicar no botão avançar, ele volte uma foto com apenas um click em voltar, mas não funciona assim.

 

O engraçado é quando chega na última foto e eu click por exemplo 3 vezes em avançar, quando click no botão voltar é preciso eu clickar 4 vezes pra voltar uma foto, é isso que me deixa doido, e não consigo entender.

 

Por favor pessoal, alguma luz ?

 

Segue meu código (simples por sinal):

 

<!DOCTYPE html>

<html lang = "pt-br">

<head>

<meta charset = "UTF-8">

</head>

<body>

 

<script>

tipo = 0;

 

function mudarFoto(tipo) {

 

if (tipo > 2) {

tipo = 2;

}

 

if (tipo < 0 ) {

tipo = 0;

{

 

if (tipo == 0) {

arquivo = "imagens/colher2.jpg";

}

 

if (tipo == 1) {

arquivo = "imagens/colher3.jpg";

{

 

if (tipo == 2) {

arquivo="imagens/colher4.jpg";

}

 

document.getElementById("foto").src = arquivo;

document.getElementById("mostrar").innerHTML = tipo;

}

</script>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Oi, boa noite!

Eu quero que quando chegue na última foto e click no botão voltar,



Tem varias maneiras de fazer isso, mas vejo que seu problema é mais voltado pra lógica.

Um exemplo pra exercitar, (Obs: o console.log é exibido no modo desenvolvedor (f12) na aba 'Console' do Google Chrome.

<!DOCTYPE html>
<html lang = "pt-br">
<head>
	<meta charset = "UTF-8">
</head>
<body>

<script type="text/javascript">

	//Incia x
	var x = 0;
	console.log(x);
	
	//Soma o proprio valor de x + 1 (no caso 0 + 1)
	x = x + 1; 
	console.log(x);// 1
	x = x + 1; 
	console.log(x);// 2
	x = x + 1; 
	console.log(x);// 3
	x = x + 1; 
	console.log(x);// 4
	
	//Ok, agora seria interessante se somar o valor de x de uma maneira que ele não seja superior a 3
	//Podemos criar uma função, por exemplo:
	
	function somar_x(x_atual){
		if(x_atual < 3){
			//Só entra aqui caso o segundo parametro da função seja menor que 3
			return x_atual + 1;
		}
		return x_atual;
	}
	
	
	// vamos zerar o x apenas pra testar...
	x = 0;
	
	
	console.log(x); // 0 Pois zeramos alí em cima
	
	x = somar_x(x);
	console.log(x); //1
	
	x = somar_x(x);
	console.log(x); //2
	
	x = somar_x(x);
	console.log(x); //3
	
	x = somar_x(x);
	console.log(x); //3
	
	x = somar_x(x);
	console.log(x); //3   Repare que ele não supera o número 3 ....
</script>

</body>
</html>

* Obs: tem erros no seu codigo, nas chaves pro exemplo 

//Ex da sua condição
if(expresssao){

{


//e o certo deveria ser uma chave aberta e outra fechada, ex:
if(expresssao){

}

Boa sorte com o exemplo, tenta criar uma função como fiz no exemplo acima para não extrapolar sua 'tipo'.

 

Seria legal você trabalhar com o DOM + Listener .... mas vamos igual o Jack.. por partes haha

document.getElementById('proximo-quadro').addEventListener('click', function() {
	document.getElementById("foto").src = arquivo;
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

im@sters    0

im@sters
Postado

que isso amigo ta pensnado da forma errada exemplo tente assim

<a href='#' id='anterior'>proximo</a>

<ul id='slider'> <li class='active'><img src='imagem01.jpg'></li><li><img src='imagem02.jpg'></li><li><img src='imagem03.jpg'></li></ul>

<a href='#' id='proximo'>proximo</a>

 

 

 

document.getElementById('anteriror').addEventListener('click',function(){
var div =document.getElementById('anteriror').> li.active');
if (div.previousSibling == null ) {
var prev = document.getElementById('anteriror')+" li:last-child");
}else{
var prev = div.previousSibling;
}
console.log(prev)
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • JoaoSilva75
      Procuro programador php javascript para orçamento
      Por JoaoSilva75
      ola pessoal
       
      procuro um bom programador  de php e javascript para orçamento de um projeto inicial depois tenho outras idéias que gostaria de executar também
       
      gostaria de encontrar alguém de Porto Alegre RS mas estudo a possibilidade de negociar com alguém de outro estado de acordo com o orçamento
       
       
    • marlone
      Como preencher formulario de outro site com informações do meu banco de dados
      Por marlone
      Como eu faço para preencher dados do meu banco de dados em um formulário de outro site. Ex: tenho um produto no meu banco de dados e quero cadastrar ele no mercado livre. Já tenho diversos campos cadastrados no meu banco como : Produto, descricao, quantidade e etc... e queria ser redirecionado para o formulário de cadastro do mercado livre com os campos preenchidos com as informações que já tenho e preencher o resto manual. É possível ?
    • silvagno
      Salvar dados de formulario em aquivo HTML
      Por silvagno
      galera to com um problema que ja faz uns dias que não to conseguindo resolver..
      eu to querendo fazer o seguinte : pegar os dados desse formulário e ao clicar em "adicionar membro" ele adicionar automaticamente na tabela de baixo ou de preferencia que salve os dados em um arquivo HTML para que outros usuários possa visualizar.
      Cada vez que eu for adicionando vai criando uma nova linha e adicionando os dados..
       
      <html> <head> </head> <body> <form role="form"> <div class="form-group"> <h2>Composição Familiar</h2> <form role="form" id="composicaoFamiliar" method="post"> <div class="form-group row"> <div class="col-xs-10"> <label for="nomeC">Nome Completo:</label> <input type="text" class="form-control" name="nomeC" id="nomeC" placeholder="Nome Completo" required="required" minlength="6" maxlength="20" pattern="[a-z\s]+$"><p> </div> <div class="col-xs-10 "> <label for="sexo">Sexo:</label> <input type="text" class="form-control" name="sexo" id="sexo" placeholder="Digite o sexo" required="required"><p> </div> <div class="col-xs-10 "> <label for="dataN">Data de Nascimento:</label> <input type="date" class="form-control" name="dataN" id="dataN" required="required"><p> </div> <div class="col-xs-10 "> <label for="idade">Idade:</label> <input type="number" class="form-control" name="idade" id="idade" required="required"><p> </div> <div class="col-xs-10 "> <label for="parentescoF">Parentesco Familiar:</label> <input type="text" class="form-control" name="parentescoF" id="parentescoF" placeholder="Digite o parentesco familiar" required="required"><p> </div> <div class="col-xs-10 "> <label for="defF">Deficiencia:</label> <input type="text" class="form-control" name="defF" id="defF" placeholder="Digite SIM ou NÃO" required="required"><p> </div> <div class="col-xs-8 "> </div> </div> <button id="adicionarM" type="submit" class="btn btn-default" ">Adicionar Membro</button> </form> <table class="table table-bordered" id="tabela"> <tbody> <tr> <th>Nome Completo</th> <th>Sexo</th> <th>Data de Nascimento</th> <th>Idade</th> <th>Parentesco Familiar</th> <th>Deficiencia?</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table </form> <button id="botaocadastrar" type="submit" class="btn btn-default">Cadastrar >></button> <button id="botaovoltar" type="submit" class="btn btn-default"><< Voltar </button> </div> </form> </body> </html>  
    • gilbertjuniors
      Bootstrap - Mudar posição de legenda no Slide Show
      Por gilbertjuniors
      Pessoal, boa noite.
       
      Sou novato no Bootstrap, estou seguindo a W3School e implementei um slide show com legendas.
       
      Queria mudar a posição das legendas para o topo das imagens do corrossel, tentei alterar parâmetros de margin, padding no CSS mas, não surtiu efeito
       
      Alguém me dá uma luz, please!
       
      O exemplo do tutorial é o W3School Bootstrap exemplo
       
      Meu código baseado neste exemplo ficou:
       
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .carousel-inner img {height: 100%;} </style> <body> <!-- The slideshow --> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/slide1.jpg" alt="slide 1" width="100%"> <div class="carousel-caption"> <h3>texto1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> <div class="carousel-item"> <img src="images/slide2.jpg" alt="slide 2" width="100%"> <div class="carousel-caption"> <h3>texto2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> <div class="carousel-item"> <img src="images/slide3.jpg" alt="slide 3" width="100%"> <div class="carousel-caption"> <h3>texto3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body>  
    • silvagno
      Chamar um texto ao digitar um valor
      Por silvagno
      Boa noite,
       
         Fiz uma caixa de texto e gostaria de saber como faço para chamar um texto ao digitar um valor na input.
      Ex: ao digitar 1320 deve aparecer o nome João na outra input.
       
      Obrigado!
      <tr> <td>Cod:</tr> <td> <input type="text" name="Nomes" size="5"></br></br> <textarea name="nome pessoal" rows="10" cols="50"></textarea> </td> </tr>  

×

Informação importante

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

  Aceito