0

Estoy creando JS para imágenes rotatorias, es decir, tendremos varias fotos colocadas en una misma posición que cambiarán cada “x” segundos.

Ya hice los array de las imágenes. Creé la variable contador para ir recorriendo las posiciones de los arrays y otra variable para asignar el tiempo que permanecerán visibles los banners.

También ya hice la función que nos cambie la foto del banner cada “x” segundos.

Actualmente cambian las fotos pero el problema es que solamente cambia dos veces, es decir, "foto a" y "foto b" aun cuando en los array existan "foto a", "foto b", "foto c", "foto d", etc.

Esto es lo que tengo en código:

/* ARRAY DE IMAGENES 1 */
ads = new Array(4);
ads[0] = "http://diosmediante.com/img/imgx.png";
ads[1] = "http://diosmediante.com/img/imgx_a.png";
ads[2] = "http://diosmediante.com/img/imgx_b.png";
ads[3] = "http://diosmediante.com/img/imgx_c.png";


/* ARRAY DE IMAGENES 2 */
ads2 = new Array(5);
ads2[0] = "http://diosmediante.com/img/imgx2.png";
ads2[1] = "http://diosmediante.com/img/imgx2_a.png";
ads2[2] = "http://diosmediante.com/img/imgx2_b.png";
ads2[3] = "http://diosmediante.com/img/imgx2_c.png";
ads2[4] = "http://diosmediante.com/img/imgx2_d.png";


/* ARRAY DE IMAGENES 3 */
ads3 = new Array(3);
ads3[0] = "http://diosmediante.com/img/imgx3.png";
ads3[1] = "http://diosmediante.com/img/imgx3_a.png";
ads3[2] = "http://diosmediante.com/img/imgx3_b.png";


/* ARRAY DE IMAGENES 4 */
ads4 = new Array(4);
ads4[0] = "http://diosmediante.com/img/imgx4.png";
ads4[1] = "http://diosmediante.com/img/imgx4_a.png";
ads4[2] = "http://diosmediante.com/img/imgx4_b.png";
ads4[2] = "http://diosmediante.com/img/imgx4_c.png";



/* ARRAY DE IMAGENES 5 */
ads5 = new Array(2);
ads5[0] = "http://diosmediante.com/img/imgx5.png";
ads5[1] = "http://diosmediante.com/img/imgx5_a.png";


/* ARRAY DE IMAGENES 6 */
ads6 = new Array(4);
ads6[0] = "http://diosmediante.com/img/imgx6.png";
ads6[1] = "http://diosmediante.com/img/imgx6_a.png";
ads6[2] = "http://diosmediante.com/img/imgx6_b.png";
ads6[3] = "http://diosmediante.com/img/imgx6_c.png";



/* ARRAY DE IMAGENES 7 */
ads7 = new Array(2);
ads7[0] = "http://diosmediante.com/img/imgx7.png";
ads7[1] = "http://diosmediante.com/img/imgx7_a.png";


//variable para llevar la cuenta de las imagenes
var longuitudArray = ads.length;
var longuitudArray = ads2.length;
var longuitudArray = ads3.length;
var longuitudArray = ads4.length;
var longuitudArray = ads5.length;
var longuitudArray = ads6.length;
var longuitudArray = ads7.length;
var contador = 0

// Un numero aleatorio
contador = Math.floor((Math.random() * longuitudArray))

// Cambia la imagen cada segundo en este ejemplo
var tiempo = 2// En segundos
var timer = tiempo * 1000;

// Funcion Img 1
function banner() {

	contador++;
	contador = contador % longuitudArray
	document.banner.src = ads[contador];
	setTimeout("banner()", timer);

}


// Funcion Img 2
function banner2() {
	contador++;
	contador = contador % longuitudArray
	document.banner2.src = ads2[contador];
	setTimeout("banner2()", timer);
}



// Funcion Img 3
function banner3() {
	contador++;
	contador = contador % longuitudArray
	document.banner3.src = ads3[contador];
	setTimeout("banner3()", timer);
}




// Funcion Img 4
function banner4() {
	contador++;
	contador = contador % longuitudArray
	document.banner4.src = ads4[contador];
	setTimeout("banner4()", timer);
}




// Funcion Img 5
function banner5() {
	contador++;
	contador = contador % longuitudArray
	document.banner5.src = ads5[contador];
	setTimeout("banner5()", timer);
}



// Funcion Img 6
function banner6() {
	contador++;
	contador = contador % longuitudArray
	document.banner6.src = ads6[contador];
	setTimeout("banner6()", timer);
}



// Funcion Img 7
function banner7() {
	contador++;
	contador = contador % longuitudArray
	document.banner7.src = ads7[contador];
	setTimeout("banner7()", timer);
}
html, 
body {
    height: 100%;
}
body {
@import url('https://fonts.googleapis.com/css?family=Arimo:400');

background: url(http://diosmediante.com/img/bg.png) !important;
    background-position: center; 

    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-size: cover;
}

.fa {font-weight: bold; color: #d2a979;}


A:link {text-decoration:none}

a {color: color: #d2a979;}
a:hover {color: #fff;}


.contenido {
font-family: 'Arimo', sans-serif;
font-weight: 400;  
font-size: 20px !important; 
color: #d2a979;
text-align : justify;
margin-right: 10%; 
margin-left: 10%; 
} 

#inicio {
    width: 80%;
    background-color: #fff;
    margin-top: -115;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}

.logo{
display:block;
    margin-top: 20px;
    margin-right: 20%;
    margin-bottom: auto;
    margin-left: auto;
}

h1 {
color: #d2a979; 
margin:auto; 
font-family: 'Arimo', sans-serif; 
font-weight: 400; 
font-size: 60px; 
text-align: center;
}

h2 {
color: #d2a979; 
margin:auto; 
font-family: 'Arimo', sans-serif; 
font-weight: 300; 
font-size: 30px; 
margin-right: 10%; 
margin-left: 10%; 
}

#secundario {
    width: 80%;
    background-color: #fff;
    margin: auto;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}

.tabla {width: 100%;   display:table;}

.tablita {
width: 50% !important;   
display:table-cell; 
font-family: 'Arimo', sans-serif; 
font-size: 15px; 
color: #d2a979;
text-align : justify;
}

.social {
float: right !important; 
margin-right: 10%; 
    margin-top: 83px;
}


 @media screen and (max-width: 900px) 
{
.tablita {width: 100% !important; display: inline !important; margin-left: 15px;
    margin-right: 15px;}

.no-movil {display: none !important;}

#inicio, #secundario {width: 90% !important;}

.social {
margin: auto !important; 
}


}


.myButton {
	background-color:#d2a879;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: 'Quicksand', sans-serif; 
        font-weight: 400; 
        font-size: 32px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:-1px 3px 5px #141412;
}
.myButton:hover {
	background-color:#8f6434;
}
.myButton:active {
	position:relative;
	top:1px;
}
<html>
<meta charset="utf-8">
<head>
<title>
Dios Mediante
</title>
<base href="http://diosmediante.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/faw/css/font-awesome.min.css">
<style>
html, 
body {
    height: 100%;
}
body {
@import url('https://fonts.googleapis.com/css?family=Arimo:400');

background: url(/img/bg.png) !important;
    background-position: center; 

    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-size: cover;
}

.fa {font-weight: bold; color: #d2a979;}


A:link {text-decoration:none}

a {color: color: #d2a979;}
a:hover {color: #fff;}


.contenido {
font-family: 'Arimo', sans-serif;
font-weight: 400;  
font-size: 20px !important; 
color: #d2a979;
text-align : justify;
margin-right: 10%; 
margin-left: 10%; 
} 

#inicio {
    width: 80%;
    background-color: #fff;
    margin-top: -115;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}

.logo{
display:block;
    margin-top: 20px;
    margin-right: 20%;
    margin-bottom: auto;
    margin-left: auto;
}

h1 {
color: #d2a979; 
margin:auto; 
font-family: 'Arimo', sans-serif; 
font-weight: 400; 
font-size: 60px; 
text-align: center;
}

h2 {
color: #d2a979; 
margin:auto; 
font-family: 'Arimo', sans-serif; 
font-weight: 300; 
font-size: 30px; 
margin-right: 10%; 
margin-left: 10%; 
}

#secundario {
    width: 80%;
    background-color: #fff;
    margin: auto;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}

.tabla {width: 100%;   display:table;}

.tablita {
width: 50% !important;   
display:table-cell; 
font-family: 'Arimo', sans-serif; 
font-size: 15px; 
color: #d2a979;
text-align : justify;
}

.social {
float: right !important; 
margin-right: 10%; 
    margin-top: 83px;
}


 @media screen and (max-width: 900px) 
{
.tablita {width: 100% !important; display: inline !important; margin-left: 15px;
    margin-right: 15px;}

.no-movil {display: none !important;}

#inicio, #secundario {width: 90% !important;}

.social {
margin: auto !important; 
}


}


.myButton {
	background-color:#d2a879;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: 'Quicksand', sans-serif; 
        font-weight: 400; 
        font-size: 32px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:-1px 3px 5px #141412;
}
.myButton:hover {
	background-color:#8f6434;
}
.myButton:active {
	position:relative;
	top:1px;
}

</style>
		<script type="text/javascript" src="/js/imgs.js"></script>
</head>

<body onload="banner(); banner2(); banner3(); banner4(); banner5(); banner6(); banner7();">

<div class="social">
<a href="https://www.instagram.com/dios_mediante/" target="_blank">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
&#160;&#160;
<a href="https://twitter.com/dios07856489" target="_blank">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
</a>
&#160;&#160;
<a href="https://www.facebook.com/DIOS-MEDIANTE-13996038227/?fref=http://diosmediante.com" target="_blank">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
</a>
&#160;&#160;
<a href="/tienda.php">
<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
</a>
</div>


<!-- Contenido -->

<br><br>

<a href="#"><img src="/img/logo.png" width="200" class="logo"></a>
</br>

<div id="inicio">
<div class="contenido">

<br><br><br><br><br><br>


<p>DIOS MEDIANTE es el resultado de una pasión y del trabajo hecho con toda dedicación y alegría. Diseñamos moda infantil urbana bordada y tejida a mano. Cada prenda hemos decidido que sea PIEZA ÚNICA, que no haya dos iguales. </p>

<p>
Todo lo hacemos con nuestro equipo de trabajo que integran quince mujeres de la Ciudad de México y de Chepilme, Oaxaca,  que nos sentirnos muy bien porque todo es HECHO EN MÉXICO y confiamos  de manera total en la calidad.
</p>

<p>
Hace casi 10 años que comenzamos esta aventura y hoy trabajamos agradecidas por acompañar a las niñas y niños en sus días repletos de vida y travesuras.


<br><br><br>

<center>
 <a href="https://www.kichink.com/stores/id/30806" class="myButton">COMPRA</a>
</center>
<br><br>
    </div>
</div>
<!-- //END Contenido -->





<!-- Fotos 1 -->



<br><br>


<div class="contenido">

<img src="" name="banner" width="100%">
<br><br>
<img src="" name="banner2" width="100%">

</div>


<br><br>




<!-- //END Fotos 1 -->








<!-- Secundario -->


<div id="secundario">
    <div class="tabla">
          <div class="tablita">

<br><br><br><br>
<h2>Boutique Muhna</h2>
<p style="margin-right: 10%; margin-left: 10%; ">
<b>
Pasaje Polanco<br>
Mazaryk 360<br>
Abierta todos los días<br>
Lunes a sábado de 10:00 a 8:00 pm<br>
Domingos de 10:00 a 7:00 pm
<p>
<br><br><br>
            </div>


            <div class="tablita">
<span class="no-movil"><br><br><br><br></span>
<h2>Tenderete</h2>
<p style="margin-right: 10%; margin-left: 10%; ">
<b>
Jalapa 130 esquina Guanajuato<br>
Colonia Roma Norte<br>
Abierta todos los días<br>
Lunes a viernes de 2:00 pm a 8:00 pm<br>
Sábados de 12:00 a 8:00 pm<br>
Domingos de 11:00 a 7:00 pm
</b>
</p>
<br><br><br>

          </div>
    </div>
</div>


<!-- //END Secundario -->







<!-- Fotos 2 -->


<br><br>
<div class="contenido">
<a href="/tienda.php">
<img src="" name="banner3" width="100%">
</a>
<br><br>
<a href="/tienda.php">
<img src="" name="banner4" width="100%">
</a>
<br><br>
<a href="/tienda.php">
<img src="" name="banner5" width="100%">
</a>
<br><br>
<a href="/tienda.php">
<img src="" name="banner6" width="100%">
</a>
<br><br>
<a href="/tienda.php">
<img src="" name="banner7" width="100%">
</a>
<br><br>
<!-- //END Fotos 1 -->


<br><br><br><br>





</body>
</html>

Agregué la URL no para hacer spam, sino para que puedan ver las fotos.

Saludos y de antemano gracias.

1 respuesta 1

1

El problema es que la variable longuitudArray la estás reemplazando todo el tiempo. El ultimo valor que toma es 2, por se el largo del último array.

Tendrías que probar con la siguiente modificación (asi por cada una de las funciones, aunque yo buscaría hacer una función generica):

//Modificamos esta linea:
//contador = Math.floor((Math.random() * longuitudArray))
contadorAds = Math.floor((Math.random() * ads.length))

function banner() {
    //modificamos la siguiente linea:
    //contador++;
    contadorAds++;
    //modificamos la siguiente linea:
    //contador = contador % longuitudArray;
    contadorAds = contadorAds % ads.length;
    document.banner.src = ads[contadorAds];
    setTimeout("banner()", timer);
}

Como te dije antes, buscaria de hacer una función recursiva que reciba el array, obtenga un numero random segun el length de ese array y muestre una imagen almacenada en ese array.

Espero te sea de utilidad. Cualquier cosa, me puedes consultar.

Exitos!

1
  • Muchisimas Gracias @Maskter , lo tomare en cuenta. Aún que por el momento la modificación que hiciste me funcionó de maravilla. ;) Gracias! Commented el 8 mar. 2017 a las 19:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.