Grafike scrollen

ischwab · 09.07.2005, 21:52

Hallo!
Wie kann ich es realisieren dass verschiedene Grafiken nacheinander angezeigt werden.
D.h. es soll an der gleichen Stelle verschiedene (gleich grosse) Grafiken in bestimmten Abständen C.
Schöner wäre dies wenn die Grafiken reingescrollt kommen. Falls zu schwer wäre es auch Ok wenn sie einfach nacheinander angezeigt werden.

Kann mir dafür jemand Tipps geben?
Habe kein Flash.

Stefan · 10.07.2005, 00:39

Du meinst eine Diashow?

Zitat:

Schöner wäre dies wenn die Grafiken reingescrollt kommen

Du meinst einen Übergangseffekt?

ischwab · 10.07.2005, 01:33

genau zu beiden punkten :-)

Hausmaster · 10.07.2005, 01:37

entweder du machst das mit einem animiertem gif (viel arbeit) oder mit flash..
..sateht dir flash zur verfügung...?

ischwab · 10.07.2005, 01:51

Nein genau das ist mein Problem.
Hab kein Flash und des mit Ani gif dauert mir zu lange.

Deswegen war meine Frage obs dafür irgend ein Script gibt der mir ein Diashow ermöglicht?

Malleus · 10.07.2005, 02:22

Hi, hab' gerade auch etwas kleines gebaut:

Test

PHP-Code:


			
<script language="JavaScript" type="text/javascript">



function getNewImage(imgNr)

{

var oImg=document.getElementById("myImage"+imgNr);

var newLeft=parseInt(oImg.style.left)-10;

oImg.style.left=newLeft;

if (newLeft>0) window.setTimeout("getNewImage("+imgNr+")",100);

else if (++imgNr==3)

    window.setTimeout("getNewImage("+imgNr+")",100);

}



</script>

<body onload="getNewImage(2)">

<div style="position:absolute;width:100px;height:75px;overflow:hidden">

<img id="myImage1" src="tGretel01.jpg" style="position:absolute">

<img id="myImage2" src="tGretel02.jpg" style="position:absolute;left:100px">

<img id="myImage3" src="tGretel03.jpg" style="position:absolute;left:100px">

</div>

</div>

</body>

ischwab · 10.07.2005, 12:36

@Malleus
Das sieht doch schon mal gut aus!

Ist es auch möglich das ganze als Endlosschleife einzufügen?
Ziel der ganzen Sache ist es die Logos meiner Sponsoren auf meiner Seite durchlaufen zu lassen...

Malleus · 10.07.2005, 15:09

So etwas: Test

PHP-Code:


			
<script language="JavaScript" type="text/javascript">



var imgWidth = 100,

delay = "1000",

isRunning=true;



function getImg( imgNr )

{

return document.getElementById( "myImage" + imgNr );

}



function setLeft( obj, value )

{

obj.style.left = value +"px";

}



function getNewImage( imgNr )

{

if ( !isRunning ) 

    return true;



var oImg = getImg( imgNr ),

newLeft = parseInt( oImg.style.left ) - 10;



setLeft( oImg, newLeft );



if ( newLeft > 0 ) 

    window.setTimeout( "getNewImage(" + imgNr + ")" , 100 );

else if ( imgNr < 3 )

{

  if ( imgNr == 1 )

  {

  getImg( 3 ).style.zIndex =  3;

  setLeft( getImg( 3 ), imgWidth );

  getImg(1).style.zIndex = 1;

}

  else

  {

  getImg( imgNr-1 ).style.zIndex = imgNr-1;

  setLeft( getImg( imgNr - 1 ), imgWidth );

  }

    window.setTimeout( "getNewImage(" + ( imgNr + 1 ) + ")" , delay );

}

else 

{

  var firstImage = getImg( 1 );

  firstImage.style.zIndex =  3 + 1;

  getImg( 2 ).style.zIndex = 2;

  setLeft( getImg( 2 ), imgWidth );

    window.setTimeout( "getNewImage(1)" , delay );

}





}



function stopIt()

{

isRunning = false;

};



</script>

<body onload="getNewImage(2)" onunload="stopIt()">

<div style="position:absolute;width:100px;height:75px;overflow:hidden">

<img id="myImage1" src="tGretel01.jpg" style="position:absolute;z-Index:1">

<img id="myImage2" src="tGretel02.jpg" style="position:absolute;left:100px;z-Index:2">

<img id="myImage3" src="tGretel03.jpg" style="position:absolute;left:100px;z-Index:3">

</div>

</div>

</body>