[JavaScript] Horizontales Scrolling mit Pfeilen

SidDasFaultier · 19. November 2012

Horizontales Scrolling mit Pfeilen

Hey Rushler,

hat von euch zufällig jemand ein Script mit dem ich im DIV horizontal über Pfeile hin und her scrollen kann.

Alle die ich finde sind entweder sehr alt oder wahnsinnig umfangreich beim anpassen.

Viele Dank für eure Hilfe!

Anzeige

CakeX · 19. November 2012

AW: Horizontales Scrolling mit Pfeilen

Tach,

meinst du sowas hier? http://slidesjs.com/examples/simple/ musst halt ein bissl anpassen ist aber gut Dokumentiert^^ setzt halt jquery voraus^^

Grüße

SidDasFaultier · 19. November 2012

AW: Horizontales Scrolling mit Pfeilen

Im Prinzip ja!
Hab nun ein echt einfaches Script gefunden.
Hier falls es jemand anderes auch mal braucht:

Man benötigt eine scrollDiv.js in der man folgendes einfügt:

Code:

scrollStep=1

timerLeft=""
timerRight=""

function scrollDivLeft(id){
 clearTimeout(timerRight) 
 document.getElementById(id).scrollLeft+=scrollStep
 timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
}

function scrollDivRight(id){
 clearTimeout(timerLeft)
 document.getElementById(id).scrollLeft-=scrollStep
 timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
}

function stopMe(){
 clearTimeout(timerRight) 
 clearTimeout(timerLeft)
}

dann diese Aufruf in den Head einfügen:

Code:

<script type="text/javascript" src="js/scrollDiv.js"></script>

als nächstes folgende IDs im CSS definieren:

Code:

#container { margin: 19px 0 0 0; position: relative; width: 837px; height: 72px; overflow: hidden;}
#scroller { width: auto !important; min-width: 857px; width: 857px; }

zu guter letzt im body die 2 DIVs anlegen und die "vor" und "zurück" Buttons:

Code:

<div id="container">
<div id="scroller">
<ul class="aufzaehlung">
<li>Bild 1</li>
<li>Bild 2</li>
<li>Bild 3</li>
<li>Bild 4</li>
<li>Bild 5</li>
</ul>
</div></div>
<a href="#" onmouseover="scrollDivRight('container')" onmouseout="stopMe()">left</a> | 
<a href="#" onmouseover="scrollDivLeft('container')" onmouseout="stopMe()">right</a> |

Und schwubs hat man ein scrollen ohne Scrollbalken bei der man vor und zurück scrollen kann!

Viele Grüße!

Nützliche Suchen

[JavaScript] Horizontales Scrolling mit Pfeilen

Videos zum Themenbereich