Jquery animation manually

Question

Jquery animation manually

Navigation

#1 by (2 votes)
#2 by (0 votes)

5

I would like to have an idea how I can make a type of SLIDE now with user interaction.

I can not find something on the internet to build on, and I have no idea how to do it!

In the code I have a class slide1 that makes onclick and the result appears on the screen.

$(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><divclass="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"/><divclass="logo"></div>
            <div class="mostraBox" style="display:none;width:100px;height: 20px; float:right;  position: absolute;">Bem vindo ao Windows!</div>
        </div>
            </div>

I'm trying to make another class slide2 and it makes another interaction with the user.

Now to get to slide2 I need to have a forward button.

I tried everything and could not heal my doubts.

javascript html jquery

asked by anonymous 07.11.2016 / 19:13

2 answers

Handling of HashMap between classes (Interpretation and Application) How to swap an apply within a for by a double apply?

score 2 · Answer 1

As your question was about an idea of how to make a slider, I made one here that maybe you can adapt to your needs.

The idea of this slide below is simple and a lot of people use sliders like this:

The slides are inside a box. Clicking a link moves content inside the box to the right or left by animating margin-left.

The #scrolleraux div encompasses all the slides within the div #slidesbox that has overflow = hidden.

Read the comments inside the code to understand better. If this code is of any help, give a moral and click on the setinha up to give me points of reputation. Any questions, ask. Valew, falows. Big hug.

/* 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><scriptsrc="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>

score 0 · Answer 2

I find a little concept problem with the question of the topic. JavaScript in was created just for interactivity. So the idea of a slide having no interactivity, is totally strange, although it is common we can not always do what you want with the codes. I noticed that almost everyone in the thread is using Jquery. Jquery was created to facilitate certain routines, and problems with browser compatibility. I do not necessarily have to use Jquery for every task.

My suggestion is to first create the slide with pure javascript, and then go implementing Jquery features in the functions. As for the code, I would create a code snippet on each slide with javascript event, using the setInterval function to switch between slides. For example:

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

I've prepared a code now in the afternoon to explain what I'm saying. Read the comments of the codes, and try to put img instead of h1. Only when you get to the second slide, click on the title to understand what I'm talking about.

<!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>