• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aufroll-Effekt rausnehmen (Bildergallerie)

Status
Für weitere Antworten geschlossen.

Publisher

Neues Mitglied
Hallo Zusammen

Ich habe eine Galerie mit einem JS Script gemacht.

Link:
Fugenlose Bodenbeläge, Wandbeläge, Bodenbelag, Wandbelag, Bodarto - Wohn-/Lebensräume

Wenn man auf weiter klickt kommt das nächste bild. aber wie kann ich machen dass das nächste bild immer vollständig von anfang an kommt, ohne dieses aufrollen?

Hier das Script:

Vielen Dank

HTML:
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "uploads/images/wohn/1.jpg";
Bild[1] = new Image();
Bild[1].src = "uploads/images/wohn/2.jpg";
Bild[2] = new Image();
Bild[2].src = "uploads/images/wohn/3.jpg";
Bild[3] = new Image();
Bild[3].src = "uploads/images/wohn/4.jpg";
Bild[4] = new Image();
Bild[4].src = "uploads/images/wohn/5.jpg";
Bild[5] = new Image();
Bild[5].src = "uploads/images/wohn/6.jpg";
Bild[6] = new Image();
Bild[6].src = "uploads/images/wohn/7.jpg";
Bild[7] = new Image();
Bild[7].src = "uploads/images/wohn/8.jpg";
Bild[8] = new Image();
Bild[8].src = "uploads/images/wohn/9.jpg";
Bild[9] = new Image();
Bild[9].src = "uploads/images/wohn/10.jpg";

Bild[10] = new Image();
Bild[10].src = "uploads/images/wohn/11.jpg";
Bild[11] = new Image();
Bild[11].src = "uploads/images/wohn/12.jpg";
Bild[12] = new Image();
Bild[12].src = "uploads/images/wohn/13.jpg";
Bild[13] = new Image();
Bild[13].src = "uploads/images/wohn/14.jpg";
Bild[14] = new Image();
Bild[14].src = "uploads/images/wohn/15.jpg";
Bild[15] = new Image();
Bild[15].src = "uploads/images/wohn/16.jpg";
Bild[16] = new Image();
Bild[16].src = "uploads/images/wohn/17.jpg";
Bild[17] = new Image();
Bild[17].src = "uploads/images/wohn/18.jpg";
Bild[18] = new Image();
Bild[18].src = "uploads/images/wohn/19.jpg";
Bild[19] = new Image();
Bild[19].src = "uploads/images/wohn/20.jpg";

Bild[20] = new Image();
Bild[20].src = "uploads/images/wohn/21.jpg";
Bild[21] = new Image();
Bild[21].src = "uploads/images/wohn/22.jpg";
Bild[22] = new Image();
Bild[22].src = "uploads/images/wohn/23.jpg";
Bild[23] = new Image();
Bild[23].src = "uploads/images/wohn/24.jpg";
Bild[24] = new Image();
Bild[24].src = "uploads/images/wohn/25.jpg";
Bild[25] = new Image();
Bild[25].src = "uploads/images/wohn/26.jpg";
Bild[26] = new Image();
Bild[26].src = "uploads/images/wohn/27.jpg";
Bild[27] = new Image();
Bild[27].src = "uploads/images/wohn/28.jpg";
Bild[28] = new Image();
Bild[28].src = "uploads/images/wohn/29.jpg";
Bild[29] = new Image();
Bild[29].src = "uploads/images/wohn/30.jpg";

Bild[30] = new Image();
Bild[30].src = "uploads/images/wohn/31.jpg";
Bild[31] = new Image();
Bild[31].src = "uploads/images/wohn/32.jpg";
Bild[32] = new Image();
Bild[32].src = "uploads/images/wohn/33.jpg";


var bildbereich;
var zeige = 0;
var Breite = 600;
var aktuelleBreite = 0;
var Schrittweite = 6;
var Schrittverzoegerung = 1;


function Blaettern (Richtung) {
  zeige = zeige + Richtung;
  if (zeige > Bild.length - 1) {
    zeige = 0;
  } else if (zeige < 0) {
    zeige = Bild.length - 1;
  }
  if (DOM || MSIE4) {
    bildbereich.style.clip = "rect(600px 0 425px 0)";
  } else if (NS4) {
    bildbereich.clip.right = 0;
  }
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = Bild[zeige].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';
  } else if (NS4) {
    bildbereich.visibility = "hide";
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[zeige].src + '">');
    bildbereich.visibility = "show";
  }
  BildAufbauen();
}



function BildAufbauen () {
  if (aktuelleBreite <= Breite) {
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 425px 0)";
    } else if (NS4) {
      bildbereich.clip.right = aktuelleBreite;
    }
    aktuelleBreite = aktuelleBreite + Schrittweite;
    window.setTimeout("BildAufbauen()", Schrittverzoegerung);
  } else {
    aktuelleBreite = 0;
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + Breite + "px 425px 0)";
    } else if (NS4) {
      bildbereich.clip.right = Breite;
    }
  }
}


function Init () {
  bildbereich = getElement("id", "Bildbereich");
  if (DOM && document.createElement && bildbereich.appendChild) {
    var img = document.createElement("img");
    img.setAttribute("src", Bild[0].src);
    bildbereich.appendChild(img);
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
  } else if (NS4) {
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[0].src + '">');
  }
}
</script>
HTML:
<div id="Bildbereich"></div>

<div id="Navigationsbereich"><a href="javascript:Blaettern(-1)">&lt;&lt;</a> | <a href="javascript:Blaettern(1)">&gt;&gt;</a></div>
PHP:
#Bildbereich { 
position:absolute;
left:370px;
top:145px;
padding:0;
clip:rect(0 600px 425px 0);
visibility:show;
}

#Navigationsbereich {
position:absolute;
left:220px;
top:140px;
width:100px;
font-size:15px;
}
#Navigationsbereich a {
color:black;
text-decoration:none;
}
 
Habs selber herausgefunden

Lösung:
Bei -> var Schrittweite = 6;
Je höher der wert, desto schneller ist diese "Animation". Habs nun auf 600 gestellt.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben