Scriptaculous Slide-Show

[walle_89]

Hallo!

Ich bin gerade dabei eine Slide-Show zu bauen, die auf Scriptaculous (+Prototype) basiert. Für eine einzige Slide-Show funktioniert das einwandfrei, aber ich will mehrere Slide-Shows darstellen. Nun zum Code.

var delay = 1000;
var start_frame = 0;

var ids = new Array();
ids[0] = "slide-images";
ids[1] = "slide-images2";

function init() {
	var lis = '';
	for (a=0;a<ids.length;a++)
	{
		lis = document.getElementById(ids[a]).getElementsByTagName('li');

		for(i=0;i<lis.length;i++){
			if(i!=0){
				lis[i].style.display = 'none';
			}
		}
		end_frame = lis.length -1;
		start_slideshow(start_frame, end_frame, delay, lis);
	}
}

function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}

function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = '';
		for (i=0;i<ids.length;i++)
		{
			lis = document.getElementById(ids[i]).getElementsByTagName('li');
		}
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})	
}

Event.observe(window, 'load', init, false);

.slide-images, .slide-images2{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:400px;
	height:300px;
	overflow:hidden;
}
.slide-images li, .slide-images2 li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}
.slide-images li img, .slide-images2 li img{
	display:block;
	background-color:#FFFFFF;
}

	<div class="slide-show">
	<ul class="slide-images" id="slide-images">
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.png" alt="One" title="One" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.png" alt="Two" title="Two" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.png" alt="Three" title="Three" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.png" alt="Four" title="Four" /></li>
	</ul>
	<ul class="slide-images2" id="slide-images2">
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.pn" alt="One" title="One" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.pn" alt="Two" title="Two" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.pn" alt="Three" title="Three" /></li>
		<li><img src="{*$HOST*}{*$STATIC_LAYOUT*}banner.pn" alt="Four" title="Four" /></li>
	</ul>
	</div>

Das Problem ist, dass der zweite Rotator einwandfrei funktioniert, aber der erste dann nicht mehr...

Anscheinend wird immer das letzte Element des Arrays initialisiert - wie sage ich ihm aber, dass das für beide Rotatoren gelten soll

 

[Quaese]

Hi,

ich denke, das Problem liegt eher am Array für die LI-Elemente. Hier musst du eindeutig unterscheiden, um welches Array für welchen Rotator es sich handelt und dieses an die Funktion übergeben.

var delay = 1000;
var start_frame = 0;

var ids = new Array();
ids[0] = "slide-images";
ids[1] = "slide-images2";

function init() {
	var lis = [];
	for (a=0;a<ids.length;a++)
	{
		lis[a] = document.getElementById(ids[a]).getElementsByTagName('li');

		for(i=0;i<lis[a].length;i++){
			if(i!=0){
				lis[a][i].style.display = 'none';
			}
		}
		end_frame = lis[a].length-1;
		start_slideshow(start_frame, end_frame, delay, lis[a]);
	}
}

function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}

function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
/*
		lis = '';
		for (i=0;i<ids.length;i++)
		{
			lis = document.getElementById(ids[i]).getElementsByTagName('li');
		}
*/
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
    Effect.Appear(lisAppear);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay, lis), delay + 1850);
	})
}

Event.observe(window, 'load', init, false);

Ciao
Quaese

 

[walle_89]

Danke dir für die auswührliche Antwort. Ich werde es mal versuchen!