✔ Div Scrollen mit JavaScript

[Lexatus]

Hallo liebes tutorials.de

Ich habe ein kleines Problem, welches mich seit einem Tag beschäftigt.

Folgendes: Ich lese eine Ordner mit PHP aus, speichere die Bilder in ein Array, und zeige die Bilder dan auf der HP an. Natürlich in einer geordneten Reihenfolge. Die Bilder werden in ein DIV geschrieben, und das DIV ist mit einer Scrollbar ausgestatet.

Dies sieht dan so aus:

$i = 0;
			$echtebilder = array();
			foreach ($allebilder as $bild) {
				$bildinfo = pathinfo($ordner."/".$bild);
				$size = ceil(filesize($ordner."/".$bild)/1024);

				if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
					$echtebilder[] = $bild;
					if($i%2 == 0){
						?>
						<tr> <td> 
						<a href="#" onclick="javascript:swapImage('<?php $bild ?>', '<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>');">
						<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" />
						</a>
						</td>
						<?php
					}
					else{
						?>
						<td> 
						<a href="#" onclick="javascript:swapImage('<?php $bild ?>', '<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>');">
						<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" />
						</a>
						</td>
						</tr>

Nun zu meinem Problem, da mir die Scrollbar im DIV nicht gefällt, will ich mit der Maus auf einen Pfeil klicken, der von mir in die HP eingebetet wurde und der Inhat der DIV's soll dann nach unten Scrollen. Das gleiche für nach oben.

Kann mir irgendjemand einen Ansatz geben, wie ich das am besten bewerkstelligen kann? Ich bin mit JS noch nicht wirklich sehr vertraut und versuche es mit learning by doing in der Griff zu bekommen.

Herzlich Dank schonmal im Vorraus.

MFG Lexatus

 

[Lexatus]

Ok hat auch so geklappt

Hier wäre das Beispiel:

<script language="javascript">
		var anfang = 1;
		var speedup = 5;
		var speedwn = 2;
		var Bilder = document.getElementById('Bilder');

		function scrollDivDown(){
			document.getElementById('Bilder').scrollTop += 2;
		}
		function runter() {
 		gutjetzt = setInterval("scrollDivDown(0,anfang+=speedwn)",10);
		}
		function scrollDivUp(speedup){
				document.getElementById('Bilder').scrollTop -= 4;
			}	
		function hoch() {
 		gutjetzt = setInterval("scrollDivUp(0,anfang-=speedup)",10);
		}
		function anhalten() {
 		clearInterval(gutjetzt);
 		}

	</script>