☰

» »

[JavaScript] Vrtenje slik

[JavaScript] Vrtenje slik

krajcar ::

Rad bi naredil tri različne prostore, kjer se vrtijo naključne slike iz iste mape. Slike normalno pobere iz mape a vrtijo se samo v tretjem zadnjem prostoru.

Kakšna ideja kaj bi bilo lahko narobe?

Hvala.

<div id="slike">
	<div id="slika1">
		<script language="javascript">																						
		var delay=1000 //set delay in miliseconds
		var curindex=0
											
		var randomimages=new Array()
													
			randomimages[0]="slide/1.jpg"
			randomimages[1]="slide/2.jpg"
			randomimages[2]="slide/3.jpg"
			randomimages[3]="slide/4.jpg"
			randomimages[4]="slide/5.jpg"
			randomimages[5]="slide/6.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" 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)											
		</script>
	</div>								
	<div id="slika2">
		<script language="javascript">																						
		var delay=1000 //set delay in miliseconds
		var curindex=0
											
		var randomimages=new Array()
													
			randomimages[0]="slide/1.jpg"
			randomimages[1]="slide/2.jpg"
			randomimages[2]="slide/3.jpg"
			randomimages[3]="slide/4.jpg"
			randomimages[4]="slide/5.jpg"
			randomimages[5]="slide/6.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" 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)											
		</script>
	</div>								
	<div id="slika3">
		<script language="javascript">																						
		var delay=1000 //set delay in miliseconds
		var curindex=0
											
		var randomimages=new Array()
													
			randomimages[0]="slide/1.jpg"
			randomimages[1]="slide/2.jpg"
			randomimages[2]="slide/3.jpg"
			randomimages[3]="slide/4.jpg"
			randomimages[4]="slide/5.jpg"
			randomimages[5]="slide/6.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" 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)											
		</script>
	</div>				
</div>
  • spremenil: Mavrik ()

msjr ::

Zelo nerodno napisano....

Takole, za začetek function rotateimage() se ti trikrat ponovi. Če so v vseh treh div-ih iste slike, ni treba definirat randomimages 3x

Za začetek je tale koda, dogajalo se ti bo, da bodo v vseh treh oknih iste slike (mogoče pa celo hočeš tako):

<div id="slike">
	<div id="slika1"></div>
	<div id="slika2"></div>
	<div id="slika3"></div>
</div>
<script type="text/javascript"> 

	function rotateimage() {
 
 		for (i = 1; i <= 3; i++) { //trikrat ponovimo za vsak div oz. za vsak image
			
			src = Math.floor(Math.random() * (randomimages.length));  //index v arrayu raje takole, da lahko kasneje kaj popraviš
 			
 			if (init == true){
				document.getElementById('slika' + i).innerHTML = '<img id="jpeg'+ i +'" src="'+ randomimages[src] +'">';  //prvič zapiše html kodo
			}else{
				document.getElementById('jpeg' + i).src = randomimages[src];  //vsakič naslednjič je dovolj da spremeni samo src od slike
			}
		}
		
               init = false;  //za un if zgoraj

		setTimeout('rotateimage()',1000);  //ponovimo funkcijo vsako sekundo
	} 
 
	var init = true;  // osnova za un if zgoraj
 
    // bolj enostavno zapišemo array

	var randomimages = new Array (
		'slide/1.jpg',
		'slide/2.jpg',
		'slide/3.jpg',
		'slide/4.jpg',
		'slide/5.jpg',
		'slide/6.jpg'
	);

    //preloadamo vse slike (ajde neka)

	var preload = new Array();
 
	for (n=0; n < randomimages.length; n++) {
		preload[n] = new Image();
		preload[n].src = randomimages[n];
	}
 
     //štartamo našo funkcijo ko se zloada cel window

	window.onload = function() {
		rotateimage();
	} 
 
</script>


Koda je nalašč napisana na bolj šolski način, da sploh vidiš kako in kaj.

Zgodovina sprememb…

  • spremenil: msjr ()

krajcar ::

Hvala. Tole mi je že bolj jasno.

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Potrebujem javascript pomoč

Oddelek: Programiranje		81267 (1017) no1pheeew
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje		81991 (1846) kogledom
»

Definiranje spremenjivke - javascript

Oddelek: Programiranje		51272 (1195) a-ptuj
»

Internet strani kot slideshow

Oddelek: Izdelava spletišč		212157 (1908) sverde21
»

Kako se tole naredi?

Oddelek: Izdelava spletišč		261553 (1253) njok

Več podobnih tem