Publicado em 11 de set.

X Tempo entre as Imagens

Boas,

Preciso de colocar um X tempo para rodar as imagens e não só com o refresh da página.

<script type="text/javascript">
var images = [],
index = 0;

images[0] = "<a href = 'https://www.computerhope.com/'><img src='https://www.computerhope.com/banners/banner.gif' alt='Visit Computer Hope'></a>";
images[1] = "<a href = 'https://www.computerhope.com/history'><img src='https://www.computerhope.com/banners/banner2.gif' alt='Computer History'></a>";
images[2] = "<a href = 'https://www.computerhope.com/'><img src='https://www.computerhope.com/banners/banner3.gif' alt='Visit Computer Hope'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

	 

	Não sei se deu para perceber.

	 

	Obrigado ;)

	Abraço

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

AndersonWS· 12 de set.

Isso ai seria tipo um slide? Onde vai ser utilizado?

marsolim· 12 de set.

só botar dentro dum timerInterval. pesquisa aí que tu vai achar muita coisa

Joob· 12 de set.

Basicamente é para fazer um random das imagens.. sim tipo slide..

Estruturei melhor o código.. mas o problema é que ao colocar o setInterval, ele faz refresh após 1s, mas após o refresh de 1s ele básicamente sai da página princípal, e vai rodando numa página em branco.

function randomImg(){
var myImages = new Array();

myImages[0] = "http://www.flyorientthai.com/system/wp-content/uploads/2014/11/AW-Benefit-edit-layout2.jpg";
myImages[1] = "https://www.childrensismoving.com/media/assets/files/nine_month_digital_ad_bills_banner_300x250.gif";

var rnd = Math.floor(Math.random() * myImages.length);
document.write('<img src="'+myImages[rnd]+'">');
}
setInterval(randomImg, 1000);
randomImg();

	 

	Como faço para não dar o reload à página toda, mas sim só ao script.. ?

AndersonWS· 12 de set.

2 horas atrás, Joob disse:

Como faço para não dar o reload à página toda, mas sim só ao script.. ?

Entendi.

Precisei disso uma vez e usei assim um script que acho que é o que você precisa:

var delay=2000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()
	randomimages[0]="1.jpg"
	randomimages[1]="5.jpg"
	randomimages[2]="2.jpg"
	randomimages[3]="4.jpg"
	randomimages[4]="3.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)

{

	preload[n]=new Image()
	preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" width="250" height="120" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()

{ if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay)

marsolim· 12 de set.

no lugar de document.write eu usava uma div pra botar a imagem tipo

<body onload="load_img();">
<div id="imgs"></div>

<script>

    function load_img(){
        imgs = ["imagem 1", "imagem 2", "imagem 3", "imagem 4"];
        qtd = imgs.length - 1;
        n = 0;
        setInterval(function(){ document.getElementById("imgs").innerHTML = imgs[n]; n = ((n < qtd) ? n += 1 : 0); }, 3000);
    }

</script>

AndersonWS· 12 de set.

10 minutos atrás, marsolim disse:

no lugar de document.write eu usava uma div pra botar a imagem tipo

Sim pode ser também e pode usar CSS também pra formatar.

Testou o script que eu postei?

Joob· 12 de set.

Exacto, é mesmo isso que pretendo, Obrigadão @AndersonWS ;)

Ficou a bombar.. !

Queria era colocar um link para cada randomimage [1] / [2] , etc.. só faltava isso..

Obrigado @marsolim .. não queria usar div's, porque já tenho o resto formatado para o local do javascript. mas é uma boa opção vou dar um teste pra ver como corre.

Joob· 12 de set.

Já consegui malta

Ficou tudo a bombar ! e meti os links também a bombar consoante as imagens

Obrigadão aos 2