Zeitgesteuerter Bildwechsel mit weichem Übergang :: Webdesign mit HTML, CSS sowie Javascript

Zeitgesteuerter Bildwechsel mit weichem Übergang

24.08.2010 19:03 von Gast

Besucher

Hallo,
ich bin neu hier und hoffe ihr könnt mir helfen.

Ich möchte zwei Bilderserien laufen lassen, die abwechselnd ihr jeweils nächstes Bild zeigen.
Also nacheinander diese Situationen:
Rahmen A zeigt Bild 1(a) - Rahmen B zeigt Bild 1(b)
Rahmen A zeigt Bild 2(a) - Rahmen B zeigt Bild 1(b)
Rahmen A zeigt Bild 2(a) - Rahmen B zeigt Bild 2(b)
Rahmen A zeigt Bild 3(a) - Rahmen B zeigt Bild 2(b)
Rahmen A zeigt Bild 3(a) - Rahmen B zeigt Bild 3(b)
Und dann von vorne.

Mit welchen Programmiersprachen kann ich das umsetzen?
Ich hatte an zwei flash diashows gedacht, bekomme das mit den unterschiedlichen Startzeiten aber nicht hin.

Habt ihr eine Idee???
Bin für jeden Tip dankbar.

Gruß,
naked-driver

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

24.08.2010 22:46 von TBT

the Boss

Zitat

Hallo Gast,

ich denke, dass Flash an dieser Stelle völlig übertrieben ist.
Auch per Javascript kann man eine Slideshow machen. Es dürfte sogar einfach sein, damit zwei Rahmen anzusteuern.
Also nicht bei jedem Wechsel wie bei einer normalen Slideshow das Bild wechseln, sondern dazu noch immer der Rahmen.

TBT

für diesen Beitrag bedanken sich folgende User
naked-driver

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 10:55 von naked-driver

Neuling

Zitat

Zitat: Beitrag von TBTHallo Gast,

ich denke, dass Flash an dieser Stelle völlig übertrieben ist.
Das kann gut sein, ich wusste mir aber erst mal nicht anders zu helfen...

Zitat: Beitrag von TBTAuch per Javascript kann man eine Slideshow machen. Es dürfte sogar einfach sein, damit zwei Rahmen anzusteuern.
Also nicht bei jedem Wechsel wie bei einer normalen Slideshow das Bild wechseln, sondern dazu noch immer der Rahmen.
TBT

Das hab ich nun probiert. Scheinbar teilweise erfolgreich.

Ich hab das mal hochgeladen um das zu zeigen: http://tessterl ... ashow-test.html

Wie erreiche ich denn, dass die Bilder abwechselnd geändert werden?
Kann mir da geholfen werden?

Danke für alle Hinweise.

Gruß,
naked-driver

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 11:16 von TBT

the Boss

Zitat

document.bild ist der Verweis auf ein Bild mit id bild - daher sprichst du immer das Gleiche an

eventuell sowas (ungetestet):

Code

1
2

<img src="...." id="bild0" />
<img src="...." id="bild1" />

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
<!--
// Einstellungen
var bilder = 2;
var fotos = new Array( '2.jpg', '3.jpg', '4.jpg', '5.jpg'); 
var speed = 5000;

// interne Zaehler
var zaehler = 0;
var rl = 0;

// Funktion zum Bildaustausch
function doit() {
   document.getElementById( 'bild'+rl ).src = fotos[zaehler++];
   if( zaehler == fotos.length) { zaehler = 0; }
   rl++;
   if( rl == bilder ) { rl = 0; }
}

// und Timer für alle x 1000stel Sekunden setzen

für die ungekürzte Fassung bitte einloggen

für diesen Beitrag bedanken sich folgende User
naked-driver

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 12:07 von naked-driver

Neuling

Zitat

Zitat: Beitrag von TBTdocument.bild ist der Verweis auf ein Bild mit id bild - daher sprichst du immer das Gleiche an

Ja, das war der Fehler.

Bei deinem (schön kurzen) Code hab ich aber das Problem, das irgendwo ein Fehler ist:
Das Script läuft nicht an - die beiden ersten Bilder (Gruppe A Bild 1 und Gruppe B Bild 1) werden vom Body geladen und angezeigt aber nicht vom Script ausgetauscht. Woran kann das liegen? Ich find es nicht...

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Audience" content="Alle">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
<title> diashow-test</title>

<script type="text/javascript">
<!--
// Einstellungen
var bilder = 2;
var fotos = new Array( '2.jpg', '3.jpg', '4.jpg', '5.jpg'); 
var speed = 5000;

// interne Zaehler
var zaehler = 0;
var rl = 0;

// Funktion zum Bildaustausch

für die ungekürzte Fassung bitte einloggen

Ich hab im Verzeichnis A die Datei diashow-test.html .

http://tessterl ... show-test.html

Im gleichen Verzeichnis sind die Bilder der Gruppe A
und im Verzeichnis ../B/ die Bilder der Gruppe B.

Es sind 2*5 unterschiedliche Bilder.

Geht das mit deinem Script? Was muss ich ändern?
naked-driver

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 12:25 von wotan

Member

Zitat

Du hast aber schon gelesen, das das Script ungetestet ist. Daher musst du dies noch auf Fehler untersuchen und an deine Bedürfnisse anpassen.

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 12:50 von naked-driver

Neuling

Zitat

Ich hatte ein Script, das einen Fehler hatte.
Nun bekomm ich ein Script, das einen anderen Fehler hat.

Wie kann mir das helfen - ich hab von Java leider kaum Ahnung.
Gibt es denn einen Tip, wo ich anfangen/genauer hinschauen sollte?

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 13:04 von wotan

Member

Zitat

Vielleicht hilft dir TBT ja noch weiter, nur ist dieser gerade auf @work und kann hier nicht immer rein schauen.

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 13:56 von TBT

the Boss

Zitat

na wenn deine Bilder in Unterverzeichnissen liegen, musste dies auch so angeben. Außerdem hat mein Script ein array für alle Bilder, welches immer abwechselnd geladen wird, also auch abwechselnd angeben

dann natürlich auch den Pfad mit angeben "../B/1.jpg" => also im Code dann

Code

1

var fotos = new Array( '../A/1.jpg', '../B/1.jpg', '../A/2.jpg', '../B/2.jpg');

Re: Zeitgesteuerter Bildwechsel mit weichem Übergang

25.08.2010 14:52 von naked-driver

Neuling

Zitat

Zitat: Beitrag von TBTna wenn deine Bilder in Unterverzeichnissen liegen, musste dies auch so angeben. Außerdem hat mein Script ein array für alle Bilder, welches immer abwechselnd geladen wird, also auch abwechselnd angeben

dann natürlich auch den Pfad mit angeben "../B/1.jpg" => also im Code dann

Code

1

var fotos = new Array( '../A/1.jpg', '../B/1.jpg', '../A/2.jpg', '../B/2.jpg');

OK, soweit ist mir das jetzt klar geworden. Vielen Dank.

Eine Funktion hab ich leider immer noch nicht erreichen können.
Weder mit dem Script von dir
http://tessterl ... show-test2.html

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Audience" content="Alle">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
<title> diashow-test 2</title>
<script type="text/javascript">
<!--
// Einstellungen
var bilder = 5;
var fotos = new Array( '2.jpg', '../B/2.jpg','3.jpg', '../B/3.jpg', '4.jpg', '../B/4.jpg', '5.jpg', '../B/5.jpg'); 
var speed = 5000;

// interne Zaehler
var zaehler = 0;
var rl = 0;

// Funktion zum Bildaustausch
function doit() {

für die ungekürzte Fassung bitte einloggen

Noch mit meinem:
http://tessterl ... ashow-test.html

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Audience" content="Alle">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">

<title> diashow-test </title>

<script type="text/javascript"><!--
 var GeschwindigkeitA=2500;
 var ZaehlerA=0;
 var BildergruppeA=new Array('2.jpg','3.jpg','4.jpg','5.jpg');

function BilderladevorgangA () {
if (!(document.images)) {return;}
 document.BilderA.src=BildergruppeA[ZaehlerA++];

 if (ZaehlerA == BildergruppeA.length) { ZaehlerA = 0; }
 setTimeout("BilderladevorgangA();",Geschwindigkeit);

für die ungekürzte Fassung bitte einloggen

Was mach ich nur verkehrt?

php2all Webdesign &
Programmierung