5

Eu gostaria de ter uma ideia como posso fazer um tipo de SLIDE agora com interação com o usuário.

Não consigo encontrar algo na internet pra me basear, e não consigo ter ideia como fazer isso!

No código eu tenho uma classe slide1 que faz onclick e aparece na tela o resultado.

$(document).ready(function () {
                $('.logo').on('click',function(){
                     
                   /*alert('oi'); */
                    $('.mostraBox').css('display','inline')
                    
                  
                });
            });
 .slide {
                position: relative;
                width: 650px;
                height: 500px;

                margin: 0 auto;
            }
            .slide img {
                position: absolute;

            }
            .logo {
                width: 130px;
                height: 100px;
                margin-top:150px;
                margin-left: 100px;
                border: 5px solid #FF0000;
                position: absolute;

            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
            <div class="slide1">
            <img src="http://s2.glbimg.com/NpGhQXJdJdvabAJZK61Tj6mRYQo=/0x0:694x391/695x392/s.glbimg.com/po/tt2/f/original/2015/04/20/windows-10-logo.jpg" />
            <div class="logo"></div>
            <div class="mostraBox" style="display:none;width:100px;height: 20px; float:right;  position: absolute;">Bem vindo ao Windows!</div>
        </div>
            </div>

Eu estou tentando fazer outra classe slide2 e que faça outra interação com o usuário.

Agora pra chegar no slide2 preciso ter um botão de avançar.

Procurei em tudo e não consegui sanar minha duvida.

5
  • jquery-steps.com 7/11/2016 às 18:24
  • Não ficou muito clara a sua pergunta, pode esclarecer? 7/11/2016 às 18:45
  • Claro! da uma olhadinha por favor no codigo acima. ele abre uma imagem do windows, e tem uma função de onclick na tela do windows. Após clicar irá aprecer o texto "Bem vindo ao windows". A minha duvida é que preciso colocar um button que o jquery reconheça que o proxima coisa que ele irá passar seria a classe slide2. 7/11/2016 às 18:48
  • Sendo mais claro ainda. Quando concluir a animação acima, tenho que ter uma button para que mostre outra animação. essa por exemplo, jsfiddle.net/jctpvs2d - que nada mais é que a mesma primeira.! 7/11/2016 às 18:54
  • Bora lá, se eu entendi, quando a animação for concluída que mostrar o texto "bem vindo", tu quer que apareça um botão, no quadrado vemelho q é o slide2, certo? 7/11/2016 às 20:43

2 Respostas 2

2

Como sua pergunta foi sobre uma ideia de como fazer um slider, fiz um aqui que talvez você possa adaptar para as suas necessidades.

A idéia desse slide abaixo é simples e bastante gente usa sliders assim:

Os slides estão dentro de uma caixa. Ao clicar num link o conteúdo se move dentro da caixa para a direita ou para a esquerda animando margin-left.

A div #scrolleraux engloba todos os slides dentro da div #slidesbox que tem overflow=hidden.

Leia os comentários dentro do código para entender melhor. Se esse código for de alguma ajuda, dê uma moral e clique na setinha pra cima para me dar pontos de reputação. Qualquer dúvida, pergunte. Valew, falows. Grande abraço.

/* arquivo codigo_slide.js */

$(document).ready(function(){

	$('.proximo').click(function(){
		marginvalue = $("#scrolleraux").css("margin-left");
		
		marginvalue = marginvalue.replace("px", "");  // tira o px pra usar em cálculo
		
		marginvalue=parseInt(marginvalue); //converte de string para inteiro
		
		marginvalue = marginvalue - 600;
		
		//alert(marginvalue);

		$("#scrolleraux").animate({ 
		'margin-left' : marginvalue,
		}, "slow");	
	});

	$('.anterior').click(function(){
		marginvalue = $("#scrolleraux").css("margin-left");
		
		marginvalue = marginvalue.replace("px", "");  // tira o px pra usar em cálculo
		
		marginvalue=parseInt(marginvalue);
		
		marginvalue = marginvalue + 600;
		
		//alert(marginvalue);

		$("#scrolleraux").animate({ 
		'margin-left' : marginvalue,
		}, "slow");	
	});				
		
});
/* arquivo estilo.css */

/* 1) Definir tamanho da caixa que guarda os slides e dos slides */
/* 
- Se for mudar o valor do width, mude tb nos dois blocos de Javascript 
- Se for mudar o valor do height, mudar tb no css do #scrolleraux 
*/
#slidesbox, .slide { width:600px; height:300px; }

/* 2) scrolleraux é uma tira que agrupará todos os slides juntos e será animada a margem esquerda dessa div */
/* Esse valor da width abaixo tá extrapolado pra poder acrescentar mais slides sem se importar com o tamanho, 
   mas o importante é só que caibam todos os slides um do lado do outro  */
#scrolleraux { height:300px; width:99999px; overflow:hidden; margin-left:-0px; }

/* 3) A caixa não cresce junto com o conteúdo */
#slidesbox { 
			 overflow: hidden;  
			 border:1px solid #000;
		   }
		   
/* 4) Os slides devem ficar um ao lado do outro  */
.slide { float:left; overflow:hidden; }

.anterior, .proximo { cursor: pointer; color:#adf; }
<!DOCTYPE html>
<html>
<head>
	<title>Exemplo de Slider com Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  	<link rel="stylesheet" type="text/css" href="estilo.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script src="codigo_slide.js"></script>  
  

</head>
<body>


<div id="slidesbox">
<div id="scrolleraux">

	<div class="slide">
		<h1>SLIDE 1</h1>
		<span class="proximo">Próximo &raquo;</span>
	</div>							<!-- O primeiro slide não tem link Anterior -->
	
	<div class="slide">
		<h1>SLIDE 2</h1>
		<span class="anterior">&laquo; Anterior</span> |
		<span class="proximo">Próximo &raquo;</span>
	</div>
	
	<div class="slide">
		<h1>SLIDE 3</h1>
		<span class="anterior">&laquo; Anterior</span> |
		<span class="proximo">Próximo &raquo;</span>
	</div>		

	<div class="slide">
		<h1>SLIDE 4</h1>
		<span class="anterior">&laquo; Anterior</span>
	</div>							<!-- O último slide não tem link Próximo -->
	
	
</div>
</div>

<body>
<html>

0

Encontro um pequeno problema de conceito com a dúvida do tópico. O JavaScript em foi criado justamente para interatividade. Então a ideia de um slide não ter interatividade, é totalmente estranha, ainda que seja comum não conseguirmos sempre fazer o que quer com os códigos. Reparei que quase todos no tópico estão usando Jquery. Jquery foi criado para facilitar certa rotinas, e problemas com compatibilidade de browser. Não necessariamente tenho que usar Jquery a toda tarefa.

Minha sugestão é primeiro criar o slide com javascript puro, e depois ir implementando recursos Jquery nas funções. Quanto ao código, eu criaria um trecho de código em cada slide com evento javascript, usando a função setInterval para alternar entre os slides. Por exemplo :

document.getElementById("slide").innerHTML = '<taghtml onclick="MinhaFuncaoInterativa">Meu conteúdo</taghtml>';

Aprontei um código agora de tarde para explicar o que estou dizendo. Leia os comentários dos códigos, e tente colocar img ao invés de h1. Somente quando chegar no segundo slide, clique em cima do título para entender o que estou falando.

<!DOCTYPE html>
<html>
    <!--
        @ Autor: Paulo Sérgio Duff
        @ Assunto : Slide com interatividade
        @ Plataform: stack overflow
        -->
    <head>
        <title>Meu slide interativo</title>
        <script type="text/javascript">
            var slide = 1; // Configura para chamar o primeiro slide com valor em 1
            var max   = 3; // Configura a quantidade mäxima de slide

                function conteudoDoSlide()
                                        {   
                                            document.getElementById("slide").innerHTML = '<h1 id="interatividade'+slide+'" onclick="interatividade'+slide+'()">'+'Slide número '+slide+'</h1>'; //Eu trocaria h1 por img para ficar mais ilustrativo.

                                            if (slide >= max) // Evita que slide ultrapasse o limite máximo escolhido pela variavel max
                                            {
                                                 slide = 1;
                                            }
                                                else
                                                {
                                                    slide++;
                                                }


                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }

                function passarSlide()
                                        {
                                            setInterval("conteudoDoSlide()", 3000); // Aplica a função conteudoSlide() a cada 3000 milisegundos (3 segundos) 
                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }
                function iniciaSlide() // Função apenas para evitar que a página inicie sem nada de slide. Em seguida chama o temporizador! 
                                        {
                                            document.getElementById("slide").innerHTML = '<h1 id="interatividade'+slide+'" onclick="interatividade'+slide+'()">'+'Slide número '+slide+'</h1>';
                                            slide++;
                                            passarSlide();
                                        }

                function interatividade2()
                                        {
                                            alert('O slide 2 está sendo interativo!'); // Configura a interatividade de um dos slides. 
                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }


        </script>
    </head>
    <body onload="iniciaSlide()">
        <center>
            <div id="slide"></div>
        </center>
    </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .