Tema: Imagenes Aleatorias
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/03/2013, 14:19
carlosarmikhael
 
Fecha de Ingreso: septiembre-2012
Mensajes: 53
Antigüedad: 12 años, 5 meses
Puntos: 0
Imagenes Aleatorias
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
  1. <!DOCTYPE html>
  2. <html>
  3.     <header>
  4.         <script type="text/javascript" src="jquery.js"></script>
  5.         <script type="text/javascript">
  6.             var max = 13;
  7.             var i = 0;
  8.             var speed = 3000;
  9.             var delay = 20000;
  10.  
  11.             $(document).ready(function(){
  12.                 setInterval("mover()", delay);
  13.             });
  14.  
  15.             function mover(){
  16.                 $('#carousel ul').animate({marginLeft:'-=700px'}, speed);
  17.                 i++;
  18.                 if (i == max) {
  19.                     i = 0;
  20.                     $('#carousel ul').animate({marginLeft:'0px'}, 1);
  21.                     return
  22.                 }
  23.             }
  24.         </script>
  25.         <style type="text/css">
  26.             body, html, #container{
  27.                 padding: 0;
  28.                 margin: 0;
  29.                 border: 0;
  30.             }
  31.             #container{
  32.                 width:700px;
  33.                 height:430px;
  34.             }
  35.             #carousel{
  36.                 width:700px;
  37.                 height:430px;
  38.                 overflow:hidden;
  39.             }
  40.             #carousel ul {
  41.                 list-style-type:none;
  42.                 margin:0;
  43.                 padding:0;
  44.                 width:20000px;
  45.             }
  46.             #carousel li {
  47.                 margin:0;
  48.                 padding:0;
  49.                 display:inline;
  50.             }
  51.             #carousel ul li img{
  52.                 width:700px;
  53.                 height:430px;
  54.                 float:left;
  55.             }
  56.             #navPrev {float:left;}
  57.             #navNext {float:right;}
  58.         </style>
  59.     </header>
  60.     <body>
  61.         <div id="container">
  62.             <div id="carousel">
  63.                 <ul>
  64.                     <li><img src="slides/slide_1.jpg" /></li>
  65.                     <li><img src="slides/canaima-1.png" /></li>
  66.                     <li><img src="slides/canaima-2.png" /></li>
  67.                     <li><img src="slides/canaima-ondas.png" /></li>
  68.                     <li><img src="slides/Colorful-7.jpg" /></li>
  69.                     <li><img src="slides/fondo.png" /></li>
  70.                     <li><img src="slides/fondo12.png" /></li>
  71.                     <li><img src="slides/FondoCanaimaV3.png" /></li>
  72.                     <li><img src="slides/gotas-cristal-la-lluvia-gota-macro-textura-color-verde-690618.jpg" /></li>
  73.                     <li><img src="slides/green_vector_wallpaper_by_Bartas1503.png" /></li>
  74.                     <li><img src="slides/[imagenes1.jpg" /></li>
  75.                     <li><img src="slides/lluvia-en-verde.jpg" /></li>
  76.                     <li><img src="slides/mujeres.jpg" /></li>
  77.                     <li><img src="slides/mujeres-en-hd-de-assassins-creed-taringa-223865.jpg" /></li>
  78.                 </ul>
  79.             </div>
  80.         </div>
  81.     </body>
  82. </html>