Animación Slider

vicman_inf · #1 (**permalink**) 15/09/2014, 02:29

Buenos días alguien tiene una idea o algún tutorial de como hacer este slider de imágenes como el que esta es esta web donde dice "OTROS PROYECTOS"

http://www.signia.es/es/proyectos/fripan/_id:73/

necesito saber cómo hacer ese efecto para un proyecto web, debería ser responsive design si no es mucha molestia :)

Muchas gracias de antemano

IsaBelM · #2 (**permalink**) 15/09/2014, 04:22

esto es lo que está buscando

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

a {outline: 0;}

.cont{
width: auto;
height: auto;
}

.cont > div {
display: inline-block;
vertical-align: top;
}

div#contenedor{
width: 890px;
height: 200px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
}

div#contenedor div.slider{
width: 375%; /* equivale al ancho de 12 imágenes. no tocar */
height: 250px;
}

div#contenedor div.slider img {
width: 160px;
display: inline-block;
margin: 30px 30px 45px;
}
</style>
<script type="text/javascript">
function Evento(elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

elemento.attachEvent('on' + nomevento, fnc);

}
}

var numImgIteracion = 4; // número de imágenes por iteración

var imgslide = [
'./imagenes/DSC00001t.jpg',
'./imagenes/DSC00001t.jpg',
'./imagenes/DSC00001t.jpg',
'./imagenes/DSC00001t.jpg',
'./imagenes/DSC00003t.jpg',
'./imagenes/DSC00003t.jpg',
'./imagenes/DSC00003t.jpg',
'./imagenes/DSC00003t.jpg',
'./imagenes/DSC00009t.jpg',
'./imagenes/DSC00009t.jpg',
'./imagenes/DSC00009t.jpg',
'./imagenes/DSC00009t.jpg',
'./imagenes/DSC00010t.jpg',
'./imagenes/DSC00010t.jpg',
'./imagenes/DSC00010t.jpg',
'./imagenes/DSC00010t.jpg',
'./imagenes/DSC00003t.jpg'
];

var preImg = [];

for(var i = 0; i < imgslide.length; i++) {

preImg[i] = new Image();
preImg[i].src = imgslide[i];
}

function mover(posInicial, posFinal, slider, indiceImg) {

if (posInicial <= posFinal) {

for (var i = 0; i < numImgIteracion; i++) {

var nxtIndice = parseInt(indiceImg+i) % imgslide.length;
var siguienteImg = document.createElement('img');
siguienteImg.setAttribute('src', preImg[nxtIndice].src);
slider.appendChild(siguienteImg);
}

(function desplazar() {

setTimeout(function() {

if(posInicial >= posFinal) {

for (var i = 0; i < numImgIteracion; i++) {

slider.removeChild(slider.getElementsByTagName('im g')[0]);
}

slider.style.left = 0;
return;
}

posInicial += 2;
slider.style.left = -posInicial + '%';
desplazar();

}, 12);

})();
}

setTimeout(function() {

var nuevoIndice = parseInt(indiceImg+numImgIteracion) % imgslide.length;

mover(0, posFinal, slider, nuevoIndice);

}, 3000);
}

function inicia() {

setTimeout(function() {

var slider = document.querySelector('div.slider');

mover(0, 100, slider, numImgIteracion);

}, 3000);
}

Evento(window, 'load', inicia);
</script>
</head>
<body>
<div class="cont">

<div id="contenedor">

<div class="slider">

<img src="./imagenes/DSC00001t.jpg" alt="i0" />
<img src="./imagenes/DSC00001t.jpg" alt="i1" />
<img src="./imagenes/DSC00001t.jpg" alt="i2" />
<img src="./imagenes/DSC00001t.jpg" alt="i3" />

</div>

</div>

</div>

</body>
</html>

lo puedes ver aquí

en el ejemplo, las imágenes pasan de 1 en 1, mientras que en código pasan de 4 en 4

vicman_inf · #3 (**permalink**) 15/09/2014, 04:39

Muchas gracias!!!!

vicman_inf · #4 (**permalink**) 15/09/2014, 04:44

Cómo haría para que las imágenes aparezcan en forma de cola circular, es decir sale le 1 y la 2 se convierte en la 1 y aparece la 5 y así sucesivamente? please!

IsaBelM · #5 (**permalink**) 15/09/2014, 07:43

no comprendo lo que quieres decir. las imágenes son mostradas en un ciclo infinito

vicman_inf · #6 (**permalink**) 15/09/2014, 13:15

En el código pasan de 4 en 4 , yo quiero que se vean las 4 primeras, luego avancen hacia la izquierda de 1 en 1....

IsaBelM · #7 (**permalink**) 15/09/2014, 15:20

sólo has de hacer unos cambios

var numImgIteracion = 1; // número de imágenes por iteración
mover(0, 25, slider, numImgIteracion); // 25 corresponde al porcentaje que ocupa cada imagen en el contenedor. de tal modo que si en el contenedor se mostraran 5 imágenes, habría que cambiar ese valor a 20