Curso Jquery: Ejercicios 2

En este caso despues de ver las estructuras repetitivas, las condicionales, lo que son los arrays y varias cosas más vamos a hacer un ejercicio en el que crearemos una página web con citas celebres, en esta web pondremos un option con los diferentes autores y al pinchar en el option cuando elijamos un autor nos saldrá la cita de ese autor ademas de una foto. También pondremos unos botones para poder cambiar de cita o ponerlo de forma automática. Lo primero que vamos a hacer es crearnos la estructura.

Para los botones nos hemos creado una imagen llamada controles.png en la que hemos metido todas las imágenes, y después la hemos posicionado como un fondo dentro de los div correspondientes creando una imagen de sprite, y mediante jquery haremos que se oculte el play o pause.

El código de la estructura seria:

<style type="text/css">
	.divAutor{width:500px; margin:auto;}	
	.foto, .texto{ width:500px;  border:2px black solid; margin:auto;}
	.foto{height:400px;}
	.texto{ min-height: 40px;}
	.foto img{ width:100%; margin:auto; height:100%;}	
	.botones{ width:75px; height:25px; margin:auto;}
	.botones div{ background-image: url(controles.png); width:25px; height:25px;float:left;}	
	.siguiente{ background-position: -25px;}
	.play{ background-position: -50px;}
	.pause{ background-position: -75px; display:none;}
</style>
</head>
<body>

<div class="divAutor">
<h1>Citas celebres</h1>
Selecciona autor:
<select class="autor">
  <option>Elige autor</option>
</select>
</div>
<div class="foto"></div>
<div class="texto"></div>
<div class="botones">
	<div class="anterior"></div>
	<div class="siguiente"></div>
	<div class="play"></div>
	<div class="pause"></div>
</div>

Una vez creada la estructura añadiremos el archivo y la función para funcionar con jquery.

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
        });
</script>

Lo primero que vamos a hacer es crearnos tres arrays, uno para las citas, otro para las fotos y otro para los autores como sigue, además nos creamos una variable para saber la posicion en la que estamos y otra que usaremos cuando pulsemos el play, también inicializamos el option:

var citas=["La verdad se corrompe tanto con la mentira como con el silencio.","No basta decir solamente la verdad, mas conviene mostrar la causa de la falsedad.","El que busca la verdad corre el riesgo de encontrarla.","La verdad es lo que es, y sigue siendo verdad aunque se piense al revés."];
var fotos=["ciceron.jpg","aristoteles.jpg","manuel.jpg","machado.png"];
var autor=["Ciceron","Aristoteles","Manuel Vicent","Antonio Machado"];
var pos=0;
var i=0;
var animacion;
for(i=0;i<autor.length;i++){
	$(".autor").append("<option value=\""+i+"\">"+autor[i]+"</option>");
}

Ahora lo que vamos a hacer es crear un evento para cuando cambie el select, tenemos que tener en cuenta que en las opciones del select hemos puesto un value, este value sera igual a la posicion de la foto y del texto dentro de los arrays, con lo que lo primero que haremos sera recuperar el value y cambiar el contenido de foto y texto por el del array, hemos usado una función que se llama poncita a la que le pasamos el numero de la cita a poner.

         $(".autor").change(function(e){
		pos=$(".autor").val();
		if(isNaN(pos)){
			$(".foto").html("");
			$(".texto").html("");
		}else{
			poncita(Number(pos));
		}
	});
	
	var poncita=function(pos){
		$(".foto").html("<img src='"+fotos[pos]+"' alt=''>");
		$(".texto").html("<p>"+citas[pos]+"</p>");
		$(".autor").val(pos);
	}

Después lo que nos quedaría seria añadir las funciones para los botones y ya tendríamos todo hecho, para el botón anterior decrementamos la posición y comprobamos que la posición no sea menor que 0 y ponemos la cita correspondiente, de forma similar el botón siguiente. El play y pause es similar, en el play decimos que se ejecute cada 3000 milisegundos la función siguiente y ocultamos ese botón y visualizamos el pause y en el pause paramos la animación y mostramos el botón del play y ocultamos el pause.

$(".anterior").click(function(e){
		pos--;
		if(pos<0)
			pos=fotos.length-1; //pos=0;
		poncita(pos);
	});
	$(".siguiente").click(function(e){
		pos++;
		if(pos>=fotos.length)
			pos=0;// pos=fotos.length-1;
		poncita(pos);
	});
	$(".play").click(function(e){
		animacion=setInterval(function(e){
			$(".siguiente").click();
		},3000);
		$(".play").fadeOut(500,function(e){
			$(".pause").fadeIn(500);
		});
	});
	$(".pause").click(function(e){
		clearInterval(animacion);
		$(".pause").fadeOut(500,function(e){
			$(".play").fadeIn(500);
		});
	});

Comparte en tus redes sociales