kariert: Probleme in Schleife

Beitrag lesen

Hallo,

ich habe folgendes Problem:
es gibt 3 div-boxen welche ähnlich wie bei Apfelprodukten durch seitlich-fahrende Animation aufgerufen werden sollen.

Generell funktioniert mein Vorhaben, wenn ich mich auf der Startseite befinde.
Bin ich aber auf Seite 2, übernimmt er die JQuery Eigenschaften des Verschiebens -> Dieses versuchte ich durch eine ITE-Auswahl zu umgehen.
Leider ohne Vergnügen - jetzt blockt es das ganze komplett.
Habt ihr einen Vorschlag für eine Lösung oder findet den Fehler?

Danke

<!DOCTYPE html>
<html>
<head>
  <style>

body, html { overflow: hidden; }

#navi {
  position:relative;
  background-color:#abc;
  margin: 10px auto auto auto;
  width:110px;
  height:30px;
}

#div1 {
  position:relative;
  background-color:#abc;
  margin: 50px auto auto auto;
  width:500px;
  height:800px;
}

#div2 {
  position:absolute;
  background-color:#abc;
  width:500px;
  height:800px;
  margin: -800px 0 0 2000px;
}

#div3 {
  position:absolute;
  background-color:#abc;
  width:500px;
  height:800px;
  margin: -800px 0 0 3290px;
}

</style>
  <script src="http://code.jquery.com/jquery-

latest.js"></script>
</head>

<body>
<div id="navi">
  <button id="b1">b1</button>
  <button id="b2">b2</button>
  <button id="b3">b3</button>
</div>

<div id="div1" class="block"></div>
<div id="div3" class="block"></div>
<div id="div2" class="block"></div>

<script>

var page=1;

if (page=1)
{
  $("#b1").click(function(){
  $(".block").animate({"left": "+=0px"}, "slow");
  page=1;});

$("#b2").click(function(){
  $(".block").animate({"left": "-=1290px"}, "slow");
  page=2;
  });

$("#b3").click(function(){
  $(".block").animate({"left": "-=2580px"}, "slow");
  page=3;
  });
}

else (if (page=2))
{
  if (page=2) {
  $("#b1").click(function(){
  $(".block").animate({"left": "+=1290px"}, "slow");
  page=1;});

$("#b2").click(function(){
  $(".block").animate({"left": "-=0px"}, "slow");
  page=2;
  });

$("#b3").click(function(){
  $(".block").animate({"left": "-=1290px"}, "slow");
  page=3;
  });
}

else (if (page=3))
{
  $("#b1").click(function(){
  $(".block").animate({"left": "+=2580px"}, "slow");
  page=1;});

$("#b2").click(function(){
  $(".block").animate({"left": "+=1290px"}, "slow");
  page=2;
  });

$("#b3").click(function(){
  $(".block").animate({"left": "-=0px"}, "slow");
  page=3;
  });
}

</script>

</body>
</html>