steuerbare bildleiste

[momo95]

Hallo,

ich habe vor, ein par bilder in einer Reihe automatisch von rechts nach links laufen zu lassen. Wenn ich über die bilder gehe, sollsen sie anhalten und wenn ich rechts auf eine grafik klicke nach rechts laufen. ebenso nach links.

Am besten wäre es, wenn ich die bilder noch verlinken und ständig ersetzen könnte,
daher ist meiner meinung nach flash nicht so gut.

Schonmal Danke
Momo95

 

[omoxen]

hi,
am einfachsten geht das mit nem iframe und rechts und links davon zwei buttons.
in dem iframe sind deine bilder, in einer reihe, mit einem hash-code (#1,2,3 u.s.w.).
Klickt jemand auf einen button, wechselst du den hash-code des iframes, sodass der browser den nächsten anchor aufruft. Es geht natürlich eleganter mit [iframe].scroll(), oder auch ohne iframe, aber das hier ist die simpelste lösung. Wenn du es gut machst brauchst du dafür nicht einmal javascript.

 

[threadi]

Am Einfachsten geht es meiner Meinung nach mit einer <ul>-Liste innerhalb von einem umgebenden div's. Die kann man so gestalten, dass der Liste die absolute Position innerhalb der Umgebung immer um x Pixel nach links oder rechts verschoben wird. Mit mouseover und mouseout kann man diese Animation dann anhalten indem man in einer JavaScript-Variable eine "lock"-Variable setzt. Solange diese gesetzt ist findet keine Animation statt. Die Buttons links und rechts kann man dann analog gestalten.

Tipp: jQuery ist dafür durchaus hilfreich.

 

[momo95]

vielen dank fürs erste,
aber wie mach ich, dass die position immer 1px verschoben wird

 

[threadi]

Bei jQuery gibt es die animate()-Funktion mit der man den left-Wert jeweils um x Pixel ändern kann. Wenn man es selbst schreibt müsste es in etwa so aussehen:

var aktuelle_position = parseInt(obj.style.left);
var verschiebung = 10;
var neue_position = aktuelle_position + verschiebung;
obj.style.left = neue_position + "px";

Das natürlich in einer entsprechenden Funktion geschrieben die mit window.setTimeout() aufgerufen wird - fertig.

 

[omoxen]

dafür ist jQuery unnötig.
Wenn du´s mit einer Liste machen willst, schieb die eben in ein div, dessen größe du festgelegt hast und das die Eigenschaft overflow:hidden; hat.
Dann brauchst du noch die Eventhandler:
[rechts-button-handler].onmousedown = function(){
[listen-handler].style.left = parseInt([listen-handler].style.left) - 1;
}