Meine Routine funktioniert soweit sehr gut - mit zwei Buttons steuere ich das scrolling eines absolut positionierten Div-Elements. Dabei wird jeweils um um 130 pixel nach Rechts oder Links gescrollt. Allerdings zeigt sich ein seltsames Phänomen, das scrollen nach Links wird immer schneller, nach Rechts hingegen immer langsamer ohne dass ich das beabsichtigt habe. Besonders deutlich tritt das mit Google Chrome auf. Bei Internet Explorer hingegen (!)ausgerechnet scheint es gut zu klappen. Im verdacht habe ich setInterval, das offenbar mit clearInterval nicht immer gelöscht zu werden scheint. Eher sieht es so aus als würde setInterval nur unterbrochen und beim nächsten Funktionsaufruf neu erzeugt + das alte setInterval fortgesetzt zu werden = Kummulativer Effekt der sich als Beschleunigung bzw. Abbremsen manifestiert. Das zu wissen hilft mir jedoch nicht weiter, denn ich kenne keine andere andere Möglichkeit, um setInterval mundtot zu machen. Habt Ihr eine Idee, wie mir das gelingen könnte?
Hier, der Code:
<script type="text/javascript">
var Scrol_Wert = 0;
var Abstandswert= 130;
var Cur_Pos =0;
var OneClickATime=1;
function Scroller(richtung)
{
if (richtung =='left')
{
Scrol_Wert=Scrol_Wert-2;
Cur_Pos=Cur_Pos+2;
}
if (richtung =='right')
{
Scrol_Wert=Scrol_Wert+2;
Cur_Pos=Cur_Pos+2;
}
if (Cur_Pos<=Abstandswert)
{
x.style.left = Scrol_Wert + "px";;
}
else
{
clearInterval(Animator);
Animator = undefined;
OneClickATime =1; //Funktion wieder anklickbar machen
Cur_Pos=0;
}
}
function ScrollMe(richtung)
{
if(OneClickATime)
{
x = document.getElementById("Regal_Container");
OneClickATime =0; //Funktion für die Animationsdauer sperren
Cur_Pos=0;
Animator = setInterval("Scroller('"+richtung+"')", 10);
}
}
</script>
Mit je einem Bildelement als Buttons wird das ganze gesteuert.
<?PHP
echo "<a href=\"javascript:ScrollMe('left')\"><img src='pix/dist-comp/0.jpg' width='80' height='127' border='0'></a><br>";
echo "<a href=\"javascript:ScrollMe('right')\"><img src='pix/dist-comp/0.jpg' width='80' height='127' border='0'></a><br>";
?>