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