Scrollen einer horizontalen Bilderliste

J

JBJHJM

Mitglied
Erstmal ein hallo an alle

Ich versuche, mir für meine Homepage als Übersicht so etwas wie hier:
JavaScript Slideshow - TinySlideshow zusammenbauen,
ALLERDINGS GEHT ES NUR UM DEN UNTEREN THUMBNAIL-BEREICH!

Die Bilder sind einfach in einer mit css horizontal formatierten Liste verstaut, der sichtbare Bereich ist allerdings begrenzt. Was ich jetzt mit Javascript erreichen will ist einfach, dass ich links und rechts von dieser Liste die beiden "Pfeil- bzw. Scrollfelder" habe, die, sobald ich mit der Maus über sie gehe, die Bilder-Liste nach links/rechts verschieben.

Vom oben genannten Beispiel gibt es den Quelltext offen einzusehen, allerdings gehört da soviel mehr dazu, dass es mich momentan überfordert, die passenden Schnipsel da drin zu finden.

Also - ich brauche nicht unbedingt eine fertige Lösung, aber wenn irgendjemand zu dem Thema sinnvolle Tutorials oder Tipps hat, wäre ich recht dankbar - ja, ich bin Javascript-Anfänger, kenne mich zwar mit Delphi ganz gut aus, aber das ist doch noch ein "gewisser" Unterschied.
 
Hi,

ausgehend von dem Beispiel http://christoph.ist-stylish.de/tut/scrolllayer.html, das in vertikaler Richtung arbeitet, würde der modifizierte Code zum horizontalen Scrollen so lauten:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>Scrollbarer Layer</title><meta name="AUTHOR" content="con-f-use@gmx.net" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript"><!--
        //coded by con-f-use@gmx.net - be fair and do not remove this

        function scrollDiv(strId,intSpd) {
                if ( objScrll=document.getElementById(strId) ) {
                        var left = parseInt(objScrll.style.left);
                        if ( (intSpd>0) ? (left<0) : (left>parseInt(objScrll.parentNode.style.width)-objScrll.offsetWidth) )
                                objScrll.style.left = (left + intSpd) +"px";
                        eval( 'tvar' + strId +'= setTimeout("scrollDiv(\''+ strId +'\',' + intSpd + ')",50)' );
                        if (objSelf=scrollDiv.arguments[2])
                                objSelf.onmouseup = objSelf.onmouseout = new Function('fx','clearTimeout(tvar' + strId + ')');
                }
        }
//--></script>

</head><body><div>

<div style="position:relative; overflow:hidden; height:20px; width:128px;">
        <div id="content" style="position: absolute; width: 640px; padding: 5px; left: 0; top: 0;">
                Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla.
        </div>
</div>

<a href="#" onclick="return false" onmouseover="scrollDiv('content',8,this)">Rechts</a><br />
<a href="#" onclick="return false" onmouseover="scrollDiv('content',-8,this)">Links</a>

</div></body></html>


Vielleicht kannst du mit dieser "übersichtlicheren" Script-Fassung etwas anfangen.

mfg Maik
 
Danke schön, das sieht auf den ersten Blick schon recht übersichtlich und logisch aus! Ich gucks mir nachher mal genauer an.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück