Imagenes Aleatorias

carlosarmikhael · #1 (**permalink**) 21/03/2013, 14:19

Buenas tengo una duda tengo unas imágenes que se rotan . . . segun el oden que yo les di en la etiqueta <ul> pero como podrias hacer para que esas imagenes siempre se roten en forma aleatoria... aqui dejo el codigo

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <header>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            var max = 13;
            var i = 0;
            var speed = 3000;
            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
                }
            }
        </script>
        <style type="text/css">
            body, html, #container{
                padding: 0;
                margin: 0;
                border: 0;
            }
            #container{
                width:700px;
                height:430px;
            }
            #carousel{
                width:700px;
                height:430px;
                overflow:hidden;
            }
            #carousel ul {
                list-style-type:none;
                margin:0;
                padding:0;
                width:20000px;
            }
            #carousel li {
                margin:0;
                padding:0;
                display:inline;
            }
            #carousel ul li img{
                width:700px;
                height:430px;
                float:left;
            }
            #navPrev {float:left;}
            #navNext {float:right;}
        </style>
    </header>
    <body>
        <div id="container">
            <div id="carousel">
                <ul>
                    <li><img src="slides/slide_1.jpg" /></li>
                    <li><img src="slides/canaima-1.png" /></li>
                    <li><img src="slides/canaima-2.png" /></li>
                    <li><img src="slides/canaima-ondas.png" /></li>
                    <li><img src="slides/Colorful-7.jpg" /></li>
                    <li><img src="slides/fondo.png" /></li>
                    <li><img src="slides/fondo12.png" /></li>
                    <li><img src="slides/FondoCanaimaV3.png" /></li>
                    <li><img src="slides/gotas-cristal-la-lluvia-gota-macro-textura-color-verde-690618.jpg" /></li>
                    <li><img src="slides/green_vector_wallpaper_by_Bartas1503.png" /></li>
                    <li><img src="slides/[imagenes1.jpg" /></li>
                    <li><img src="slides/lluvia-en-verde.jpg" /></li>
                    <li><img src="slides/mujeres.jpg" /></li>
                    <li><img src="slides/mujeres-en-hd-de-assassins-creed-taringa-223865.jpg" /></li>
                </ul>
            </div>
        </div>
    </body>
</html>

IsaBelM · #2 (**permalink**) 22/03/2013, 04:19

es un tema que se trató en el foro de javacript ya hace tiempo

carlosarmikhael · #3 (**permalink**) 22/03/2013, 12:19

Muchas gracias por su respuesta ..

pero es que por lo que veo todos los ejemplos las imagenes estan declaradas en el scrip y yo las necesito en el body en la #carousel ul , como podria hacer eso. . . para que el las busque aleatorio. . . sin colocar las imagenes arriba en scrip y mantenerlas dentro de el jquery.js

Gracias. . .

carlosarmikhael · #4 (**permalink**) 22/03/2013, 13:07

lo que realmente necesito es que la imagenes que esten dentor del div sean aleatorias D: si me puedes ayudar gracias :D

IsaBelM · #5 (**permalink**) 23/03/2013, 08:37

en tal caso has de modificar el dom

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function fnc() {
var bloque = document.getElementById('secc');
var secciones = bloque.getElementsByTagName('div');

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

var aleatorio = parseInt(Math.floor(Math.random() * secciones.length));
for(var nodo = secciones[aleatorio]; nodo.previousElementSibling; bloque.appendChild(nodo.previousElementSibling));

}
}

window.onload = function() {fnc();};
</script>
</head>
<body>
<div id="secc">
<div>Sección 1</div>
<div>Sección 2</div>
<div>Sección 3</div>
<div>Sección 4</div>
<div>Sección 5</div>
</div>
</body>
</html>