Nieprawidłowe wczytywanie obrazków.

0

Witam,
z JS jestem początkujący i czytając parę poradników chciałem zrobić slideshow na stronę.

<script language="JavaScript">

var Imgi = new Array(3);

function load(){
var Imgi[0] = new Image();
    Imgi[0].src = "img/aktu/01.jpg";
var Imgi[1] = new Image();
    Imgi[1].src = "img/aktu/02.jpg";
var Imgi[2] = new Image();
    Imgi[2].src = "img/aktu/03.jpg";
}

function zmien(num){
	document.images['obrazek'].src = Imgi[num].src;
}

</script> 

<body onload="load()">
   <img onClick="zmien(0)" src="img/aktu/11.jpg"/>
   <img onClick="zmien(1)" src="img/aktu/12.jpg"/>
   <img onClick="zmien(2)" src="img/aktu/13.jpg"/>

   <img src="img/aktu/03.jpg" name="obrazek" alt="">
</body>

Nie wiem co w tym jest nie tak, ze nie zmienia mi obrazków, zależy mi na wcześniejszym załadowaniu obrazków bo na bieżąco nie chcę tego robić. Na bieżąco mi działa a z załadowaniem nie. Co jest źle w tym kodzie ?
Pozdrawiam

3

Zainwestuj w IDE, nie pisz stron w notatniku.
vkABdv0.jpg
Nie wpisuj var przed poszczególnymi elementami tablicy - wystarczy przed deklaracją.

Porada ekstra: Zamiast new Array(3) wpisz po prostu []. Nie musisz deklarować długości tablicy, różnica w szybkości jest znikoma (a nie piszesz dynamicznej gry z setką obliczeń na sekundę, tylko jednokrotne wywołanie tablicy.

I wywal language z <script> -- nie ma czegoś takiego jak atrybut language - jeżeli takie coś znalazłeś w poradniku/książce to ten poradnik/książka jest starsza niż Ty pewnie, albo po prostu pisana przez laika.

0

jak ja tego nie zauważyłem że tworząc tablice nie powinienem już dawać tworzenia kolejnego tylko przypisanie... dziękuje bardzo a co do IDE to popatrzę na jakieś triale jak na razie ;P

0

"Zainwestuj" to była przenośnia - mnóstwo jest darmowych (Netbeans, Aptana, Eclipse), ja używam płatnego PhpStorm - jest trial, pełna ok 400zł - ale warto, lepszy od wszystkich darmówek.
Edit: było na forum parę tematów o IDE do PHP - poszukaj.

0

jak na razie ściągnąłem trial adobe dreamweaver cs5 ;)

mam już ostatnie pytanie: chcę żeby zmieniały się przykładowo co 2 sekundy obrazki, więc skonstruowałem taką funkcję i teraz pytanie, po załadowaniu obrazków wywołuje mi funkcję zmien(0) czyli zaczynam 'pokaz' a bardziej rotację od pierwszego zdjęcia, problem że przy wczytywaniu jak mam ustawione sztywno na 3 foto to 1 mi nie łąduje, po kliknięciu działa funkcja normalnie, a raczej zmienia mi obrazek bo po 2 sec dalej nic się nie dzieje :P
inaczej, w CS w podglądzie aktywnym jak najbardziej to działa, ale w Firefox już nie

<script type="text/javascript">

var Imgi = new Array(3);
var i = 0;

function load(){
	Imgi[0] = new Image();
    Imgi[0].src = "img/aktu/01.jpg";
	Imgi[1] = new Image();
    Imgi[1].src = "img/aktu/02.jpg";
	Imgi[2] = new Image();
    Imgi[2].src = "img/aktu/03.jpg";
	zmien(0);
}

function zmien(num){
	document.images['obrazek'].src = Imgi[num].src;
	if (num == 2) {
		i = 0;
	} else {
		i = num + 1
	}
	setTimeout(function(){zmien(i)}, 2000); 
} 

</script> 

<body onload="load()">
   <img onClick="zmien(0)" src="img/aktu/11.jpg"/>
   <img onClick="zmien(1)" src="img/aktu/12.jpg"/>
   <img onClick="zmien(2)" src="img/aktu/13.jpg"/>
 
   <img src="img/aktu/03.jpg" name="obrazek" alt="">
</body>
0

Problemem jest na pewno to, że w load() wywołujesz funkcję zmien(), która to wywołuje siebie w pętli - klikając wiele razy spowodujesz utworzenie wielu timerów, które chodzą w kółko.

Do FF sobie zainstaluj wtyczkę Firebug - tam będziesz miał konsolę, w której zobaczysz czy javascript nie rzuca jakichś błędów. Ale nie powinien, bo poza dwoma pominiętymi średnikami błędów nie ma (a javascript jest tolerancyjny i ma <abbr title="automatic semicolon insertion">ASI</abbr>) - u mnie w FF jest ok. W Operze też.

0

Masz racje, poklikałem trochę więcej i zrobiło się kilka timerów a nawet doszło do tego że zmieniają się częściej niż co 1 sekundę.
Podpowiedział byś sposób aby timer był jeden nieważne ile kliknięć ? nie wiem jak go po prostu wyzerować w JS więc zrobiłem tak jak zrobiłem.

A co do firebuga to od którejś tam wersji FF ma już wbudowane to i nie trzeba doinstalowywać :)

poradziłem już sobie, dodałem funkcję przy onClick clearTimeout(t) przy kliknięciu a pod t przypisałem setTimeout(function(){zmien(i)}, 5000); i działa :D
tylko nie wiem czy to jest tak zrobione jak powinno być

0

To, co od którejś wersji jest w FF to nie jest Firebug - to jest jakaś uboga wersja tego, nie ma rączek, nie ma nóżek, ale jest kadłubek. Nie używaj tego tylko zainstaluj Firebuga.

tak, tak jak opisałeś jest ok.

0

mam kod:

<script type="text/javascript">

var Imgi = new Array(3);
var Naglowek = new Array(3);
var Tekst = new Array(3);
var i = 0;
var t;

function load(){
	Imgi[0] = new Image();
    Imgi[0].src = "img/aktu/01.jpg";
	Naglowek[0] = "aaaaaaaa";
	Tekst[0] = "aaaaaa aaaaaaa aaaaa aaaaaaaaa aaaaaaa aaa czytaj więcej...";
	
	Imgi[1] = new Image();
    Imgi[1].src = "img/aktu/02.jpg";
	Naglowek[1] = "bbbbbbbb";
	Tekst[1] = "bbbbbbbb bbbbbb bbbbbb bbbbbbbbbb bbbbbbbbb czytaj więcej...";
	
	Imgi[2] = new Image();
    Imgi[2].src = "img/aktu/03.jpg";
	Naglowek[2] = "cccccccc";
	Tekst[2] = "ccccccccc cccccc cccc cccccccccc cccc cccccc ccccccccc czytaj więcej...";
	
	zmien(0);
}

function zmien(num){
	
	if (num == 0){
		document.getElementById('first').style.background = '#d9dadd';
		document.getElementById('second').style.background = '#FFFFFF';
		document.getElementById('third').style.background = '#FFFFFF';
	}
	if (num == 1){
		document.getElementById('first').style.background = '#FFFFFF';
		document.getElementById('second').style.background = '#d9dadd';
		document.getElementById('third').style.background = '#FFFFFF';
	}
	if (num == 2){
		document.getElementById('first').style.background = '#FFFFFF';
		document.getElementById('second').style.background = '#FFFFFF';
		document.getElementById('third').style.background = '#d9dadd';
	}
	
	document.images['obrazek'].src = Imgi[num].src;
	document.getElementById('naglowek').innerHTML = Naglowek[num];
	document.getElementById('tresc').innerHTML = Tekst[num];
	
	if (num == 2) {
		i = 0;
	} else {
		i = num + 1;
	}
	t = setTimeout(function(){zmien(i)}, 5000); 

} 

</script> 

<body onLoad="load()">

	<div id="site">
		
		<div><img src="img/str/g.png" ></div>
		
		<!--<div>
			<div style="float: left; width:60px; height:10px; background:url(img/str/l.png) repeat-y"></div>
			<div style="float: left; width:860px; height:10px">
				<div id="first" style="heigth:10px"></div>
				<div id="second"style="heigth:10px"></div>
				<div id="third" style="heigth:10px"></div>
			</div>
			<div style="float: left ;width:60px; height:10px; background:url(img/str/p.png) repeat-y"><img src="img/str/p.png" ></div>
		</div>-->
		
		<div>
			<div style="float: left; width:60px; height:80px; background:url(img/str/l.png) repeat-y"></div>
			<div style="float: left; width:860px; height:80px">
				<div id="first" style="width:286px; height: 80px; text-align: center"><img style="position: relative; top: 5px;" onClick="zmien(0); clearTimeout(t)" src="img/aktu/11.jpg"/></div>
				<div id="second"style="width:288px; height: 80px; text-align: center"><img style="position: relative; top: 5px;" onClick="zmien(1); clearTimeout(t)" src="img/aktu/12.jpg"/></div>
				<div id="third" style="width:286px; height: 80px; text-align: center"><img style="position: relative; top: 5px;" onClick="zmien(2); clearTimeout(t)" src="img/aktu/13.jpg"/></div>
			</div>
			<div style="float: left; width:60px; height:80px; background:url(img/str/p.png) repeat-y"><img src="img/str/p.png" ></div>
		</div>
		
		<!--<div>
			<div style="float: left; width:60px; height:10px; background:url(img/str/l.png) repeat-y"></div>
			<div style="float: left; width:860px; height:10px">
				<div id="first" style="heigth:10px"></div>
				<div id="second"style="heigth:10px"></div>
				<div id="third" style="heigth:10px"></div>
			</div>
			<div style="float: left; width:60px; height:10px; background:url(img/str/p.png) repeat-y"><img src="img/str/p.png" ></div>
		</div>-->

		<div>
			<div id="ss1" style="float: left">			
				<div style="float: left; width: 650px"><img src="img/aktu/03.jpg" id="img" name="obrazek" alt=""></div>
                <div style="float: right; position: relative; right: 10px; top: 10px; width: 300px; height: 280px;>
                	<p id="naglowek">bbbbbbbbbbbbbbb</p>
                    <p id="tresc">aaaaaaaaaa</p>	
                </div>
			</div>
		</div>

		<div>
			<div id="b" style="width:60px; height:10px; background:url(img/str/l.png) repeat-y"></div>
			<div id="b" style="width:860px; height:10px">
				<div id="b" style="width:286px; heigth:10px"></div>
				<div id="b"style="width:288px; heigth:10px"></div>
				<div id="b" style="width:286px; heigth:10px"></div>
			</div>
			<div id="b" style="width:60px; height:10px; background:url(img/str/p.png) repeat-y"><img src="img/str/p.png" ></div>
		</div>	
	
	</div>
	
</body>

wszystko działało dopóki nie dodałem dwóch linijek dodających nagłówek i treść newsa, menu nawigacyjne przeskakuje dalej co 5 sekund ale już nie zmienia się obrazek a tekst w ogóle nie jest wczytywany
sprawdzałem metodę z tekstem w innym dokumencie i działał
podpowiedział by ktoś co jest nie tak ? (głównie chodzi o te dwa paragrafy) :)

pozdrawiam

0

z łaski swojej wrzuć to na http://jsbin.com/ (podlinkuj jakieś obrazy też), bo nie chce mi się tego przeklejać po raz kolejny do plików, a potem przeklejać Ci odpowiedź, łatwiej kliknąć, poprawić, zapisać, zwrócić linka

0

http://jsbin.com/eziruf/3/
na stronie są w komentarzu dwie zmiany tekstu które po włączeniu nie działają a slider nie przeskakuje wtedy nawet co 5 sec tylko trzeba klikać

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto