Portada » JQuery biblioteca de JavaScript » Boton Siguiente y Previo con Jquery: Ejemplos

Boton Siguiente y Previo con Jquery: Ejemplos

Boton Siguiente y Previo con Jquery. En este artículo veremos cómo utilizar un botón HTML con Jquery para mostrar varios elementos según demos clics a ese mismo botón. Sin embargo, el objeto jQuery que representa un conjunto de elementos DOM, el método next() nos permitirá buscar a través del siguiente elemento de estos elementos en el árbol DOM y construir un nuevo objeto jQuery a partir de los elementos coincidentes.

Para lograr nuestro objetivo utilizaremos varios métodos del lenguaje JQuery, por lo tanto, aquí les dejo la lista de propiedades que implementaremos en este ejemplo.

Boton Siguiente y Previo con Jquery

  1. Método Length() nos mostrar el número de elementos que contiene en el objeto jQuery.
    Método Show() Nos mostrara todos los elementos HTML ocultos.
  2. Método prev() Obtendremos el objeto idéntico inmediatamente anterior de cada elemento en el conjunto de elementos coincidentes. Si se proporciona un selector, recupera el elemento anterior sólo si coincide con ese selector.
  3. Método hide() Utilizaremos para ocultar los elementos coincidentes dentro del conjunto de elementos.

"<yoastmark

Ejemplo #01 Partes de código que usaremos en boton siguiente.

a) Iniciando nuestro código llamando a la capa principal contenedora de los elementos cambiantes.

$(document).ready(function(){
    $(".contenedor div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

b) Cuando demos clic en el botón esta función se ejecutará dando inicio a nuestro objetivo

    $("#siguiente").click(function(){
        if ($(".contenedor div:visible").next().length != 0)
            $(".contenedor div:visible").next().show().prev().hide();
        else {
            $(".contenedor div:visible").hide();
            $(".contenedor div:first").show();
        }
        return false;
    });

c) Esta función se ejecutar cuando el usuario de clic en el botón previo

    $("#previo").click(function(){
        if ($(".contenedor div:visible").prev().length != 0)
            $(".contenedor div:visible").prev().show().next().hide();
        else {
            $(".contenedor div:visible").hide();
            $(".contenedor div:last").show();
        }
        return false;
    });

d) Manejando estilos para dar una mejor interfaz a nuestros elementos.

<style type="text/css">
	.contenedor{
		background:#AAE5F7;
		border:1px solid blue;
		width:350px;
		height:350px;
		}
		button{
			background:#6874CD;
			color:white;
			border-radius:4px;
			height:30px;
			margin:5px;
			}
		.main{
			width:350px;
			}
		.amarillo{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background:#E3F05F;
		width:350px;
		height:350px;
		line-height:350px;
		}
		.rojo{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background: #DB204F;
		width:350px;
		height:350px;
		line-height:350px;
		}
		.azul{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background: #4E42E3;
		width:350px;
		height:350px;
		line-height:350px;
		}
</style>

e) Mostraremos las capas que interactúan en nuestro ejemplo y los botones siguiente & previo

<div class="main">
<div class="contenedor">
     <div class="amarillo">Contenido 01</div>
     <div class="rojo">Contenido 02</div>
     <div class="azul">Contenido 03</div>
 </div>
<div align="center">  <button id="previo"> << Previo</button>
<button id="siguiente">Siguiente >> </button>
</div>
</div>

Mostramos todo el código completo HTML con Jquery, sin embargo, se está llamando a una librería externa por medio de Googleapis.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".contenedor div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#siguiente").click(function(){
        if ($(".contenedor div:visible").next().length != 0)
            $(".contenedor div:visible").next().show().prev().hide();
        else {
            $(".contenedor div:visible").hide();
            $(".contenedor div:first").show();
        }
        return false;
    });

    $("#previo").click(function(){
        if ($(".contenedor div:visible").prev().length != 0)
            $(".contenedor div:visible").prev().show().next().hide();
        else {
            $(".contenedor div:visible").hide();
            $(".contenedor div:last").show();
        }
        return false;
    });
});
</script>
<style type="text/css">
	.contenedor{
		background:#AAE5F7;
		border:1px solid blue;
		width:350px;
		height:350px;
		}
		button{
			background:#6874CD;
			color:white;
			border-radius:4px;
			height:30px;
			margin:5px;
			}
		.main{
			width:350px;
			}
		.amarillo{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background:#E3F05F;
		width:350px;
		height:350px;
		line-height:350px;
		}
		.rojo{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background: #DB204F;
		width:350px;
		height:350px;
		line-height:350px;
		}
		.azul{
		text-align:center;
		color:white;
		font-size:25px;
		text-shadow:2px 2px 2px #cccccc;
		background: #4E42E3;
		width:350px;
		height:350px;
		line-height:350px;
		}
</style>
</head>
<body>
<div class="main">
	

<div class="contenedor">
     <div class="amarillo">Contenido 01</div>
     <div class="rojo">Contenido 02</div>
     <div class="azul">Contenido 03</div>

 </div>
<div align="center">  <button id="previo"> << Previo</button>
<button id="siguiente">Siguiente >> </button>

</div>
</div>
</body>
</html>

Bueno con esto terminamos nuestro post, esperemos que les sea de utilidad.

"<yoastmark

Ver Demo
[download id=»2900″]

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad