Autor Zpráva
heli
Profil *
#1 · Zasláno: 6. 1. 2007, 23:55:46
Odpovědět Citovat
mám tento javAskript na přehrávání obrázků. V "body" ho mám zadaný takto:
<body OnLoad="SlideShow ();" >

CO MÁM UDĚLAT, KDYŽ CHCI TEN SAMÝ SKRIPT POUŽÍT NA HTML STRÁNCE DVAKRÁT?? DĚKUJI. HELI


<SCRIPT Language="JavaScript">
<!--
actpic = 1; // Aktualní foto
piccount = 5; // Celkový počet fotek
interval = 1000; // Interval mezi jednotlivými snímky (1 s)

var timer; // Časovač na automatické přepínání fotek

// Nastavení aktuálního obrázku
function SetPic (){
// Nastavení obrázku
document.images.imgprev.src = actpic+".jpg";
// Nastavení čísla obrázku
document.slide.PicNum.value = actpic;
}

// Následující snímek
function NextPic (){
if (actpic == piccount) actpic = 1;
else actpic++;
SetPic();
}


// První snímek
function FirstPic (){
actpic = 1;
SetPic();
}

// Spuštění slideshow
function SlideShow (){
// Po uběhnutí zadaného intervalu se zobrazí
// následující snímek
timer = setInterval ("NextPic();", interval);
}

// -->
</SCRIPT>
</HEAD>

<BODY>
<TABLE>
<TR>

<TD Align="center">
<IMG Name="imgprev" Src="1.jpg">
</TD>
</TR>
<TR>
<TD>
<A Href="#" Onclick="FirstPic();">první</A>
<A Href="#" Onclick="NextPic();">další</A>
<A Href="#" Onclick="SlideShow();">slideshow</A>
</TD>
</TR>
<TR>

<TD>
<FORM Name="slide">
Zobrazovaný obrázek:
<INPUT Name="PicNum" Type="text" Size="10">
</FORM>
</TD>
</TR>
</TABLE>
los
Profil *
#2 · Zasláno: 7. 1. 2007, 13:06:04
Odpovědět Citovat
CO MÁM UDĚLAT, KDYŽ CHCI TEN SAMÝ SKRIPT POUŽÍT NA HTML STRÁNCE DVAKRÁT?? DĚKUJI. HELI
Najlepšie by bolo prepísať ten skript tak, aby využíval objektovo orientovaný prístup.

Napr. pripojiť ku stránke takýto nejaký JavaScript: 
function Slides(picCount, imageEl, numberEl, firstEl, nextEl, showEl) {

	this.picCount = picCount;

	this.imageEl = imageEl;

	this.numberEl = numberEl;

	

	var t = this;

	

	firstEl.onclick = function() {t.firstPic()};

	nextEl.onclick = function() {t.nextPic()};

	showEl.onclick = function() {t.startShow()};

}



Slides.prototype = {

	actPic: 1,

	picCount: 1,

	interval: 1000,

	timer: null,

	imageEl: null,

	numberEl: null,

	

	setPic: function() {

		this.imageEl.src = this.actPic + ".jpg";

		

		if (this.numberEl)

			this.numberEl.innerHTML = this.actPic;

	},

	

	nextPic: function(cont) {

		if (!cont)

			this.stopShow();



		if (++this.actPic > this.picCount)

			this.actPic = 1;



		this.setPic();

	},



	firstPic: function() {

		this.stopShow();

		this.actPic = 1;

		this.setPic();

	},

	

	startShow: function() {

		var t = this;

		this.timer = setInterval(function() {t.nextPic(true);}, this.interval);

	},

	

	stopShow: function() {

		if (this.timer) {

			clearInterval(this.timer);

			this.timer = null;

		}

	}

};



function $(id) {

	return document.getElementById(id);

}



window.onload = function() {

	new Slides(2, $("imgprev-1"), $("picnum-1"), $("first-1"), $("next-1"), $("show-1"));

	new Slides(2, $("imgprev-2"), $("picnum-2"), $("first-2"), $("next-2"), $("show-2"));

}


A takto by vyzeralo HTML: 
<table>

	<tr>

		<td align="center">

			<img id="imgprev-1" src="1.jpg">

		</td>

	</tr>

	<tr>

		<td>

			<a href="#" id="first-1">první</a>

			<a href="#" id="next-1">další</a>

			<a href="#" id="show-1">slideshow</a>

		</td>

	</tr>

	<tr>

		<td>

			Zobrazovaný obrázek: <span id="picnum-1">1</span>

		</td>

	</tr>

</table>

<table>

	<tr>

		<td align="center">

			<img id="imgprev-2" src="1.jpg">

		</td>

	</tr>

	<tr>

		<td>

			<a href="#" id="first-2">první</a>

			<a href="#" id="next-2">další</a>

			<a href="#" id="show-2">slideshow</a>

		</td>

	</tr>

	<tr>

		<td>

			Zobrazovaný obrázek: <span id="picnum-2">1</span>

		</td>

	</tr>

</table>


Ešte by sa to dalo vylepšiť tak, aby to fungovalo aj bez JavaScriptu a ani by to nemuselo byť v tabuľkách, ale pre začiatok by to mohlo stačiť.
heli
Profil *
#3 · Zasláno: 7. 1. 2007, 14:47:35
Odpovědět Citovat
díky za skript - asi ti to dalo práci.


Mám ještě něco zadat do "body"? Zkouším vše možné a zatím mi to nechodí. Děkuji. Heli

např.: <body OnLoad=new Slides ();" >
los
Profil *
#4 · Zasláno: 7. 1. 2007, 16:35:34
Odpovědět Citovat
Do body.onload nič dávať nemusíš, pretože o to sa stará táto časť: 
window.onload = function() {

	new Slides(2, $("imgprev-1"), $("picnum-1"), $("first-1"), $("next-1"), $("show-1"));

	new Slides(2, $("imgprev-2"), $("picnum-2"), $("first-2"), $("next-2"), $("show-2"));

}


Keď prekopírujem ten kód, ktorý som napísal a spustím ho, tak mi funguje. Takže problém je zrejme v tom, že nesprávne inicializuješ ten objekt. Do konštruktoru (new Slides...) treba poslať tieto hodnoty:
- prvý argument hovorí, koľko obrázkov sa má zobrazovať (ekvivalentné s pôvodným piccount)
- druhý argument je prvok img, ktorý zobrazuje obrázky
- tretí argument je prvok, ktorý zobrazuje číslo obrázka (pozor: na rozdiel od pôvodného kódu sa očakáva napr. element span alebo div; v pôvodnom kóde sa číslo písalo do elementu input type=text)
- štvrtý argument je prvok, na ktorý keď sa klikne, tak sa zobrazí prvý obrázok
- piaty argument je prvok, na ktorý keď sa klikne, tak sa zobrazí nasledujúci obrázok
- šiesty argument je prvok, na ktorý keď sa klikne, tak sa začnú obrázky zobrazovať dokola

Dalo by sa to zjednodušiť napr. tak, že tie elementy by mali nejako rozumne zvolené identifikátory a nemuselo by sa tam posielať toľko argumentov.

Ešte by som to upravil tak, aby sa na začiatku metódy startShow zavolalo stopShow: 
startShow: function() {

	this.stopShow();

	var t = this;

	this.timer = setInterval(function() {t.nextPic(true);}, this.interval);

},
heli
Profil *
#5 · Zasláno: 8. 1. 2007, 10:16:56
Odpovědět Citovat
hurááá, funguje to - děkuju.
Ještě malá vychytávka:
Můžu nějak udělat, aby se mi "slideshow" spustila ihned po načtení stránky?

Heli
los
Profil *
#6 · Zasláno: 8. 1. 2007, 11:12:58
Odpovědět Citovat
Keď spravíš v onload niečo takéto, tak by to malo ísť: 
var slides1 = new Slides(2, $("imgprev-1"), $("picnum-1"), $("first-1"), $("next-1"), $("show-1"));

slides1.startShow();

alebo skrátene: 
new Slides(2, $("imgprev-1"), $("picnum-1"), $("first-1"), $("next-1"), $("show-1")).startShow();
heli
Profil *
#7 · Zasláno: 8. 1. 2007, 15:39:39
Odpovědět Citovat
Ahoj Losi (?),
takže bych měla dát do "body" ve stránce HTML:

<body OnLoad="new Slides(2, $("imgprev-1"), $("picnum-1"), $("first-1"), $("next-1"), $("show-1")).startShow();">

už se nad tím trápím dlouhooooo, listuji literaturou a nic.
"Slideshow" se nespustí po otevření stránky.
Co dělám špatně? Díky. Heli
los
Profil *
#8 · Zasláno: 8. 1. 2007, 18:04:27
Odpovědět Citovat
Keď to dávaš priamo do atribútu onload, musíš zmeniť dvojité úvodzovky na jednojité. Takto by to malo ísť: 
<body onload="new Slides(2, $('imgprev-1'), $('picnum-1'), $('first-1'), $('next-1'), $('show-1')).startShow()">

(V tom prípade nebude v tom skripte to priradenie window.onload = function() {...}.)
heli
Profil *
#9 · Zasláno: 8. 1. 2007, 21:52:48
Odpovědět Citovat
mam radost!!!! Funguje to!!
moc si mi pomohl, děkuji. Heli
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0