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
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)"><<</a> | <a href="javascript:Blaettern(1)">>></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;
}