nicht angemeldet
JS-Slider zeigt Lücke bei Übergang
Hallo Forum,
habe einen Bildslider in Javascript, der auch so weit funktioniert. Nur folgendes Phänomen: Wenn das Bild (oder die Bilder, ist egal ob es nur ein großes oder mehrere einzelne sind) sich wiederholt, bleibt eine kleine Lücke. Diese lässt beim zweiten Schleifendurchlauf nach und ist beim dritten verschwunden. Ich finde meinen Fehler einfach nicht, hat jemand einen Tipp?
zu sehen unter jstest
Der JS-Code:
// JavaScript Document
var sliderwidth = 1000;
var sliderheight = 145;
var slidespeed = 3;
var slidebgcolor = "#FFFFFF";
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;
leftrightslide[i++] = '<a href="0001.html"><img src="Bilder/nojs_leiste.jpg" border="0" height="150"></a>';
leftrightslide = '<nobr>' + leftrightslide.join("") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-3000px">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2;
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3;
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth;
cross_slide2.style.left=actualwidth+20+"px";
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
ns_slide.document.write(leftrightslide);
ns_slide.document.close();
actualwidth=ns_slide.document.width;
ns_slide2.left=actualwidth+20;
ns_slide2.document.write(leftrightslide);
ns_slide2.document.close();
}
lefttime=setInterval("slideleft()",30);
}
window.onload=fillup;
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px";
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+"px";
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px";
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+"px";
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed;
else
ns_slide.left=ns_slide2.left+actualwidth;
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed;
else
ns_slide2.left=ns_slide.left+actualwidth;
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
if (iedom){
document.write('<div style="position:relative;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;overflow:hidden">');
document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;background-color:' + slidebgcolor + '" onMouseover="copyspeed=3" onMouseout="copyspeed=3">');
document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
document.write('</div></div>');
}
else if (document.layers){
document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=3" onMouseout="copyspeed=3"></layer>');
document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=3" onMouseout="copyspeed=3"></layer>');
document.write('</ilayer>');
}
document.write('</td></table>');
}
}
-
Mit solchen Spielereien bist du hier genau ander richtigen Stelle, wie du anhand der Antworten feststellen kannst. Muß ich mich halt wieder mal erbarmen. Gleich eines vorweg, die Lösung deines Problems hab ich auch nicht gefunden, kann die Performance aber wenigstens ein wenig verbessern. Du könntest als erstes mal die 20 rauswerfen:
// cross_slide2.style.left=actualwidth+20+"px";
cross_slide2.style.left=actualwidth+"px";Damit ist wenigstens der erste Balken mal weg.
Um die Häufigkeit der kleinen Balken zu reduzieren kannst du beileftrightslide[i++] = '<img src="Bilder/nojs_leiste.jpg">'+
'<img src="Bilder/nojs_leiste.jpg">'+
'<img src="Bilder/nojs_leiste.jpg">';noch ein paar Bilder reinknallen.
Eine optimale Lösung ist das zwar nicht, aber ich fürchte, die Methode leftrightslide.join("")
verhindert dies ohnehin, da automatisch bei der Aneinanderreihung der Array-Elemente zwischen diesen ein Komma bzw. Leerzeichen gesetzt wird.
Falls unser Struppi hier mal auftaucht kannst du den vielleicht mal fragen. Der ist quasi der JavaScript-Experte hier.
Gruß psst...
Ps.: Noch ein Tip: <body style="margin:0px 0px 0px 0px;">-
// cross_slide2.style.left=actualwidth+20+"px";
cross_slide2.style.left=actualwidth+"px";Damit ist wenigstens der erste Balken mal weg.
Jup, danke.
Um die Häufigkeit der kleinen Balken zu reduzieren kannst du bei
leftrightslide[i++] = '<img src="Bilder/nojs_leiste.jpg">'+
'<img src="Bilder/nojs_leiste.jpg">'+
'<img src="Bilder/nojs_leiste.jpg">';noch ein paar Bilder reinknallen.
Eine optimale Lösung ist das zwar nicht, aber ich fürchte, die Methode leftrightslide.join("")
verhindert dies ohnehin, da automatisch bei der Aneinanderreihung der Array-Elemente zwischen diesen ein Komma bzw. Leerzeichen gesetzt wird.Na zumindest setzt join("") die einzelnen Elemente nahtlos aneinander. Dein Tipp war Gold wert. Lass jetzt einfach in einer Schleife 100 array-Elemente mit demselben Bild erzeugen. Erst danach kommt der "Sprung" (der übrigens durch die Größe von copyspeed entsteht ???) - das sollte ne Weile dauern ;). Ist sicher nicht toll, aber zumindest mal machbar bis sich Struppi meldet ;)
Ps.: Noch ein Tip: <body style="margin:0px 0px 0px 0px;">
Danke, wird aber im fertigen HTML eh anders eingebettet.
-
-
Mal was anderes....
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
ns_slide.document.write(leftrightslide);
ns_slide.document.close();
actualwidth=ns_slide.document.width;
ns_slide2.left=actualwidth+20;
ns_slide2.document.write(leftrightslide);
ns_slide2.document.close();[...]
else if (document.layers){
document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=3" onMouseout="copyspeed=3"></layer>');
document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=3" onMouseout="copyspeed=3"></layer>');
document.write('</ilayer>');
}
document.write('</td></table>');
}
}Das ist doch nicht dein Ernst oder? Hab ich was verpasst oder muss man tatsächlich noch seinen Code für Netscape 4 schreiben?
Gruß!
-
Das ist doch nicht dein Ernst oder? Hab ich was verpasst oder muss man tatsächlich noch seinen Code für Netscape 4 schreiben?
Gruß!
Das liegt daran, daß der Skript uralter Kram ist:
http://forum.de.selfhtml.org/archiv/2006/6/t130730
Merkwürdigerweise sind immer noch die gleichen Bugs drinne:
document.getElementById("temp").offsetWidth
Eine Id "temp" existiert gar nicht.
Gruß psst...
-