How about, can anyone here help me to put a panel ( div ) with images that change every so often? I already tried with <marquee> but I can not get what I want.
Here an example of what I want to achieve (is the one with a blue background), shows 3 images temporarily. I will appreciate your help.
I leave a version that does not use jQuery. What I'm trying to do is insert an image randomly in body , in this example there are 10 png images, with name from 0 to 9, the image changes every 1 second, so I put 1000 as an argument to setTimeout, every second It's equivalent to a thousand milliseconds.
This is optional, but it's good, the script file and the HTML should be in the format UTF-8 so that you can include accents (á í í ú ú), in my example, the name of the variable cantidadImágenes carries the tilde á.
I did not try the code but it should work, only if the images exist relatively to the site.
function imagenAleatoria()
{
var elemento=document.body
var cantidadImágenes=10
var aleatorio=Math.floor(Math.random()*cantidadImágenes)
elemento.innerHTML="<img src=\""+aleatorio+".png\"></img>"
setTimeout(imagenAleatoria,1000)
}
imagenAleatoria()
Welcome to StackOverflow .
A simple example developed with jQuery
Note: There is a way to create these same effects only by applying css style but applying it in that way implies a lot of css code, it is better to rely on javascript / jquery
var numItems = $(".img-wrapper .img-responsive").length; //Cuenta las imágenes
var imageToDisplay = 0; //Inicia una imagen para mostrar(la primera)
$(".img-wrapper .img-responsive").eq(imageToDisplay).fadeIn(600); //Mostramos la imágen
setInterval(function () {
$(".img-wrapper .img-responsive").eq(imageToDisplay).fadeOut(600); //Ocultar imagen actual
imageToDisplay++; //inicia la siguiente imagen para visualizar
if (imageToDisplay == numItems) { //Si la imagen de la pantalla es igual al número de imágenes, se reiniciará desde el principio.
imageToDisplay = 0;
}
$(".img-wrapper .img-responsive").eq(imageToDisplay).fadeIn(200); //Muestra la imagen siguiente.
}, 3000);.img-wrapper {
width:100%;
}
#page-body-bg {
width : 100%;
}
.img-responsive {
left:0;
position:absolute;
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow : hidden; ">
<div class="img-wrapper">
<img class="img-responsive" src="http://www.videotour24.com/v2/upload/image/8.jpg" style=" left : 0; display : absolute;" />
<img class="img-responsive" src="http://www.videotour24.com/v2/upload/image/9.jpg" style=" left : 0; display : absolute;" />
<img class="img-responsive" src="http://www.videotour24.com/v2/upload/image/5.jpg" style=" left:0; display: absolute;"/>
</div>
</div> Using a setInterval() of JavaScript should work. This function repeats a series of commands every so often as you indicate.
An example of this would be the following:
var vuelta = 0
var repetirVuelta = setInterval(function() {
vuelta++
console.log('esta es la vuelta ' + vuelta)
}, 1000)Taking the example into account, it can be seen that this function needs to be told how often the function will be performed, always taking into account that the value of 1000 is equivalent to 1 second.
If at any time you want to stop this process, you can do it using the clearInterval() , as in the following example:
var vuelta = 0
var intervalo = setInterval(function(){
vuelta++
console.log('Estas en la vuelta ' + vuelta)
}, 1000)
function stopInterval () {
clearInterval(intervalo)
console.log('El intervalo realizo un total de ' + vuelta + ' vueltas')
}<button id="mensaje" onclick="stopInterval()">Parar Intervalo</button> This function needs you to pass as a parameter the name that is placed to the variable that contains the setInterval .