hola otra vez, a ver si alguien me puede ayudar, ya tengo un codigo html para un carrusel de imagenes para mi web, pero me gustaria que las imagenes pasaran cada cierto tiempo, pero no se como meter los comandos, alguien puede decirme como? el codigo completo es este:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var max = 13;
var i = 0;
var speed = 2000;
var delay = 20000;
$(document).ready(function(){
setInterval("mover()", delay);
});
function mover(){
$('#carousel ul').animate({marginLeft:'-=700px'}, speed);
i++;
if (i == max) {
i = 0;
$('#carousel ul').animate({marginLeft:'0px'}, 1);
return
}
}
<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%;
}
div#contenedor_principal {
width: 570px;
height: 250px;
margin: 0 auto;
}
div#contenedor_principal > div#contenedor_slider{
border: 1px solid #000;
width: 570px;
height: 250px;
background: #000;
margin: 0 auto;
overflow: hidden;
}
div#contenedor_principal > span.flecha{
z-index: 99;
width: 60px;
height: 61px;
top: 100px;
position: absolute;
cursor: pointer;
}
div#contenedor_principal > span.der{
right: -9px;
background-image: url('http://imageshack.us/a/img42/2639/btnextk.png');
background-repeat: no-repeat;
background-position: 0 0;
}
div#contenedor_principal > span.izq{
left: -9px;
background-image: url('http://imageshack.us/a/img542/5567/btprev.png');
background-repeat: no-repeat;
background-position: 0 0;
}
div#contenedor_principal > div#contenedor_slider div#slider{
width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
position: relative;
left: 0;
top: 0;
}
div#contenedor_principal > div#contenedor_slider div#slider img {
width: 570px; /* mismo width de #contenedor_slider */
height: 250px; /* mismo height de #contenedor_slider */
float: left;
}
</style>
<script type="text/javascript">
var namespaceSlider = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
}
},
estableceValoryEventos: window.onload = function() {
var selectorSlider = document.getElementById('slider');
var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';
var spans = document.querySelectorAll('span.flecha');
namespaceSlider.Evento(spans[0], 'click', function() {namespaceSlider.mover(n_Imagenes, 0)});
namespaceSlider.Evento(spans[1], 'click', function() {namespaceSlider.mover(n_Imagenes, 1)});
},
clicks: 0,
posInicial: 0,
anchoImg: 100,
mover : function(nImg, i){
namespaceSlider.clicks += (i == 0) ? parseInt(nImg-1, 10) : parseInt(i, 10);
var indiceImg = namespaceSlider.clicks % nImg;
var posFinal = namespaceSlider.anchoImg * parseInt(indiceImg, 10);
var slider = document.getElementById('slider');
if (namespaceSlider.posInicial >= posFinal) { // escrolea hacia la izquierda
(function desplazar() {
setTimeout(function(){
if(namespaceSlider.posInicial <= posFinal) return;
namespaceSlider.posInicial -= 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();
} else { // escrolea hacia la derecha
(function desplazar() {
setTimeout(function(){
if(namespaceSlider.posInicial >= posFinal) return;
namespaceSlider.posInicial += 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();
}
}
}
</script>
</head>
<body>
<div id="contenedor_principal">
<span class="flecha izq"></span>
<span class="flecha der"></span>
<div id="contenedor_slider">
<div id="slider">
<a href="http://www.elosport.es/c28071-futbol.html"><img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i0" />
<img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i1" />
<img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i2" />
<img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i3" />
</div>
</div>
</div>
</body>
</html>