Algo como un Slider solo para cambiar de objeto

[cell001]

¡Hola a todos!

Necesito hacer algo así como un slider.
El objetivo es que se vean varias imágenes con un link en una misma div y sin ningún efecto.

Por ejemplo, mostrar la imagen 1, después de 5 seg aparecer la imagen 2, después la imagen 3 y así y asi, no es necesario ningún efecto.

Es para hacer como esas pagina de publicidad que muestran 1 imagen con un link y despues otra con otro link, etc etc.

Pero no se como, hay varios sliders pero tienen flechas u efectos inecesarios en este momento.

¿algún ejemplo con el cual guiarme o slider muy muy simple que haga eso?


Nota: De preferencia no comentel el EasySlider, ese es simple pero mueve demasiadas etiquetas con css que arruinan el diseño de la pagina ya hecha

¡Gracias!

[Alexis88]

Te voy a ayudar con uno que hice hace un tiempo:

Código HTML:

<div class = "slider">
    <img src = "imagen1.jpg" data-link = "enlace1.html" />
    <img src = "imagen2.jpg" data-link = "enlace2.html" />
    <img src = "imagen3.jpg" data-link = "enlace3.html" />
</div>
 

Código CSS:

.slider img{
    display: none;
    position: absolute;
}
 
.slider img:hover{
    cursor: pointer;
}
 

Código Javascript:

var div = document.getElementsByClassName("slider")[0],
    img = div.getElementsByTagName("img"),
    totalImg = img.length,
    contador = 0;
 
for (i = 0; i < totalImg; i++) {
    (function(indice){
        img[indice].addEventListener("click", function(){
            var enlace = this.getAttribute("data-link");
            window.open(enlace);
        }, false);
    })(i);
}
 
img[contador].style.display = "block";
 
var slider = {
    show: function(){
        img[contador].style.display = "none";
        contador = contador == totalImg - 1 ? 0 : ++contador;
        img[contador].style.display = "block";
    }
};
 
setInterval(slider.show, 3000);
 

La jugada es sencilla. En el documento tengo un Div con la clase "slider", el cual contiene 3 imágenes (puede ser la cantidad que quieras), dichas imágenes contiene el pseudo-atributo "data-link", el cual contendrá el enlace a la que cada imagen debe conducir. En la hojas de estilos, oculto todas las imágenes asociadas a la clase "slider" que es la clase del Div que las contiene y les doy una posición absoluta, para que cuando funciones el slider, la siguiente imagen aparezca en la misma ubicación que la anterior. Además, cuando se pose el puntero del mouse sobre cada imagen, éste se verá como una manito, tal cual se vería si se posara sobre un enlace.

En el código JS, tomo el Div desde su clase (también puede ser desde un Id), las imágenes que contiene, la cantidad de imágenes que contiene y un contador que utilizaré para controlar el slider. Luego, recorro de inicio a fin las imágenes y a cada una le añado una función, dentro de la cual, tomamos el valor del atributo "data-link" de la imagen y abrimos el enlace en una nueva pestaña o ventana (según la versión del navegador, en los modernos, nueva pestaña). Para aplicar correctamente estas instrucciones a cada imagen, utilizo una función anónima autoejecutable, la cual me ayuda a aislar el valor del contador "i" en cada iteración del bucle For, de tal modo que afectaré a todas las imágenes y no solo a la última imagen, como sucedería si no aplico este tipo de función.

Luego, mostramos a la primera imagen, ya que el valor inicial de "contador" es cero. Enseguida, creamos el objeto "slider", el cual contiene al procedimiento "show", en el cual, ocultamos a la imagen actual, verificamos el valor del contador, si es igual al índice de la última imagen, le damos un valor cero para que nuevamente empiece el ciclo, sino, aumentamos su valor en uno. Finalmente, mostramos la imagen equivalente al valor actualizado del contador.

Para controlar la ejecución del slider, utilizo el método setInterval, el cual ejecuta la función que se le pasa como primer parámetro cada cierto tiempo, indicado en el segundo parámetro, que en este caso es 3000, por lo que el cambio de imágenes se realizará cada 3 segundos o 3000 milisegundos.

Así es como se ve en ejecución: Clic aquí para ver el slider

Saludos