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>
  
<a href="https://twitter.com/dios07856489" target="_blank">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
</a>
  
<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>
  
<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.