Bienvenid@s, en esta ocasión os traigo un sencillo código para agregar a la web un sencillo slider de imágenes automático, el slider reproduce cada cierto tiempo cada imagen a través de su ruta src agregada previamente a un array, para la reproducción continua, se hace uso del método setTimeout de Javascript que va aumentando en 1 una variable llamada "siguiente", si el valor de la variable "siguiente" supera el index de elementos del array de imágenes, entonces regresa a 0.
El efecto de desplazamiento es proporcionado por los métodos css y animate de Jquery, es decir, de ida-retorno a la posición inicial.
El resto de código consiste en la inclusión de algunos estilos css para determinar la anchura y altura del slider y otras propiedades CSS necesarias para el funcionamiento correcto del slider, como puede ser la propiedad overflow: hidden; en el elemento #box-imagen, es decir el div que alberga en su interior la imagen, esto es para evitar que la imagen se salga del contorno del div.
Debajo de la demostración del slider podéis ver y copiar el código de este ejemplo.
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
imagenes = new Array();
//Agrega tantas imágenes como necesites en el array
imagenes[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJP8iVzbivTOKQyfepVjsj-_S8Yn8Yl_3fue2loFXPwgjyzsZtzIygx-gg-Q5CviQrpMuB60O_Zr71CjBYA8vKsbs6-ZdGjXfd3FWCbVQFx_RJZKpzUKajjBGTWaeNUQvmyZtZtnBo4Mh/w719-h539-no/3.jpg";
imagenes[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9KHjckABasZUXc90yRPSPcqPrZ4DI3n6xOwdzlcYoJFSGv_RQKBhK5XbWNaCaY-cgBjVVgA1XsdNFXIBGwz1GRMrpbfUeRvH_Cc457tFVwYzLi3Abk0H3gMgViLpufPf3PPw2UX8hZ9b/w719-h539-no/3.jpg";
imagenes[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMY10svRdj1vTPx7OKaE9iaZ2Bu3KMDEwZHQAv6p-yftsvK-SShk1ypSgpipNo4zs84GzRceJqTkcmPk9ffiyJ-5QqFmaYKdYVRkQWLtnme7tAT4uqmxYQ6pLCOyWKW7VH214SMAHui8JM/w809-h539-no/1.jpg";
imagenes[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfI9z6_75JZ6-HUr8bkRWvqNgdhhY0-Cm8zQ8zjJyQIeNS9ShO3tKMzOtf-mNcDhkHwbWx3lfvX8OQ7BXREm1VFKO-b4eltCvxcVVb5pioGvRu6mlS_Z3dpcrA8AbzMqkfOwKfT-WmvVP/w719-h539-no/1.jpg";
imagenes[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmzvnelY_Q1LbmWE9-uD7QXoMOqltvTvtNNnVNgDZ7ZQiq1XAnXCsLfjzbzvFD1NHnOgi4TQqqtmG2bja62Hy47dSLoPjpSRVgK8RFX_brTEV4PCo84vCNr1FpFZwiklIQmzK0_W9u2ho/w807-h539-no/1.jpg";
imagenes[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhms1M936y0m1AMJqS4B0PlzWPSFtW7LDbxOAeC8-77FyhASgKdhhvnJhrXmEb6MH3ASCmzDPoHZHgP8MyX3b_o2rIsZYS4wlmrwQ4dVgat3Yn-S7NNKi8Gq35q2s9yp1eGRBQKESdjOZ-F/w718-h539-no/1.jpg";
siguiente = 0;
function CambiaImagen()
{
dimensiones = $("#box-imagen").width();
$("#box-imagen img").css({left: -dimensiones+"px"}).attr("src", imagenes[siguiente]);
$("#box-imagen img").animate({left: "+="+dimensiones});
$("#box-imagen a").attr("href", imagenes[siguiente]);
siguiente = siguiente+1;
if (siguiente >= imagenes.length)
{
siguiente = 0;
}
//Aquí puedes colocar el tiempo para cada transición de imagen
transicion = 4000;
setTimeout("CambiaImagen()", transicion);
}
$(function(){
CambiaImagen();
});
</script>
<style>
#box
{
width: 500px;
background: black;
padding: 10px;
border-radius: 4px;
}
#box-imagen{
width: 500px;
height: 250px;
background: black;
overflow: hidden;
}
#box-imagen img
{
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box">
<div id="box-imagen">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJP8iVzbivTOKQyfepVjsj-_S8Yn8Yl_3fue2loFXPwgjyzsZtzIygx-gg-Q5CviQrpMuB60O_Zr71CjBYA8vKsbs6-ZdGjXfd3FWCbVQFx_RJZKpzUKajjBGTWaeNUQvmyZtZtnBo4Mh/w719-h539-no/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJP8iVzbivTOKQyfepVjsj-_S8Yn8Yl_3fue2loFXPwgjyzsZtzIygx-gg-Q5CviQrpMuB60O_Zr71CjBYA8vKsbs6-ZdGjXfd3FWCbVQFx_RJZKpzUKajjBGTWaeNUQvmyZtZtnBo4Mh/w719-h539-no/3.jpg"></a>
</div>
</div>
</body>
</html>
Slider de imágenes Jquery, Slider de imágenes para Blogger, Slider de imágenes Wordpress, Slider de imágenes para un Blog
No hay comentarios:
Publicar un comentario