✔ einfaches horizontales Div-Scroll Script

F

fredolin

Erfahrenes Mitglied
Hallo Leute,

ich weiß, dass es hier schon sehr oft als Thema gelistet ist. Hab hier auch geschaut und über Google gegoolet.. Aber ich suche ein einfaches JavaScript, wo ich in einem Div-Kontainer Bilder von rechts nach links scrollen kann.

Doch leider finde ich nichts da. Auch möchte ich keine Javaliaberi wie JQuery oder Moontools verwenden.

Wenn mir da einer helfen könnte würde ich mich sehr freuen. Anpassen an meine Gegebenheiten da mache ich selbst. Aber so ein Grundgerüst das wäre super.

Mein Versuch nachträglich eingefügt

PHP: 
<script type="text/javascript">
	function scrollToLeft() {
		var x = 0;
		if(window.pageXOffset) {
			x = window.pageXOffset;
		} else if (document.body && document.body.scrollLeft) {
			x = document.body.scrollLeft;
		}
		if (x <= 0) {
			window.scrollBy(0, +30);
			setTimeout("scrollToLeft()", 10);
		} else if (x > 0) {
			window.scrollBy(0, -30);
			setTimeout("scrollToLeft()", 10);
		}
	}
</script>

Und wie man dann mit CSS den DIV Container bestimmen kann.

LG
fredolin
 
Zuletzt bearbeitet:
Meinst du so etwas:


HTML: 
<script language="javascript" type="text/javascript">
function scrollToLeft() {
// aktuelle Position ermitteln
aktuell = parseInt(document.getElementById("div1").style.left);
// um 10 Pixel nach links
aktuell = aktuell - 10;
document.getElementById("div1").style.left = aktuell;
// wenn DIV ganz raus ist, wieder auf Startposition setzen
if (aktuell + parseInt(document.getElementById("div1").style.width) <= 0) document.getElementById("div1").style.left = 0;

setTimeout("scrollToLeft()", 500);

}
</script>
<body onload="scrollToLeft();">
<div id="div1" style="position: absolute; left: 0 px; width: 440 px; border-style: solid;">
<img src="bild1" id="bild1" height="100" width="100" alt="bild1" style="padding-right: 10 px;"/>
<img src="bild2" id="bild2" height="100" width="100" alt="bild2" style="padding-right: 10 px;"/>
<img src="bild3" id="bild3" height="100" width="100" alt="bild3" style="padding-right: 10 px;"/>
<img src="bild4" id="bild4" height="100" width="100" alt="bild4" style="padding-right: 10 px;"/>
</div>
</body>
 
Hallo tombe,

ich habe dein Script ausprobiert. Doch leider funktioniert es nicht.
Ich hab es in neier Seite eingebunden und in der Fehlerkonsole bekomme ich die Meldung

PHP: 
Fehler beim Verarbeiten des Wertes für 'left'. Deklaration ignoriert.

Hab die Seite mal zum anschauen hier hochgeladen.

Vielleicht kannst du mir ja weiterhelfen.

Danke
 
Zusatz:
Fehlerbehoben, das Script funktioniert.

Doch wie müsste ich das bauen um über Button einmal nach Links und wieder zurück nach rechts die Bilder laufen zu lassen?

Könntest Du mir da helfen?
 
Im Grunde einfach der Funktion als Parameter die Richtung bzw. den entsprechenden Wert mitgeben:

HTML: 
<script language="javascript" type="text/javascript">
function scroll(pos) {
// aktuelle Position ermitteln
aktuell = parseInt(document.getElementById("div1").style.left);

// um 10 Pixel nach links oder rechts
aktuell = aktuell + pos;
document.getElementById("div1").style.left = aktuell;
// wenn DIV links ganz raus ist, wieder auf Startposition setzen
if (aktuell + parseInt(document.getElementById("div1").style.width) <= 0) document.getElementById("div1").style.left = 0;

// wenn DIV rechts ganz raus ist, wieder auf Startposition setzen
if (aktuell >= document.body.offsetWidth) document.getElementById("div1").style.left = 0;


}
</script>
<body>
<div id="div1" style="position: absolute; left: 0 px; width: 440 px; border-style: solid;">
<img src="bild1" id="bild1" height="100" width="100" alt="bild1" style="padding-right: 10 px;"/>
<img src="bild2" id="bild2" height="100" width="100" alt="bild2" style="padding-right: 10 px;"/>
<img src="bild3" id="bild3" height="100" width="100" alt="bild3" style="padding-right: 10 px;"/>
<img src="bild4" id="bild4" height="100" width="100" alt="bild4" style="padding-right: 10 px;"/>
</div>
<div style="position: absolute; top: 150 px;">
<a href="#" onclick="scroll(10);">Rechts</a>
<br />
<a href="#" onclick="scroll(-10);">Links</a>
</div>
</body>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück