Javascript Bild scroller arbeitet nicht mit DOCTYPE
-
12-09-2019 - |
Frage
Ich habe für einige Javascript-Code im Netz schwer zu suchen, die mich automatisch ermöglicht, Bilder blättern non-stop horizontal auf einer Webseite. Nach langer Suche kam ich endlich über etwas, das nahe genug war. Ich angepasst dann so viel wie möglich, um es genau zu tun, was ich wollte, es zu tun.
Dieses Testen auf einer Seite ohne DOCTYPE getan, also wenn ich es auf eine Seite bewegt über die eine DOCTYPE hatte, wurde die Javascript vermasselt und weigerte sich zu bewegen. Es zeigte sich nur ein einziges stationäres Bild (auf Safari und Firefox)
Ich habe beiden Seiten meine MobileMe-Website hochgeladen, so dass Sie Jungs einen Blick haben.
Die Seite ohne DOCTYPE: web.me.com/zubby
Die Seite mit einem DOCTYPE: web.me.com/zubby/2.html
die JavaScript ist auch unten detailliert beschrieben. Ich werde sehr dankbar, wenn mir jemand helfen kann mit diesem.
ich hochgeladen nur die entsprechenden Dateien so firebug wahrscheinlich über nicht vorhandene Funktionen beschweren.
var pic = new Array();
function banner(name, width, link){
this.name = name
this.width = width
this.link = link
};
pic[0] = new banner('images/cellarpics/cellarbynightsmall.jpg',203,'images/cellarpics/cellarbynightsmall.jpg');
pic[1] = new banner('images/cellarpics/insidecellarnewsmall.jpg',203,'images/cellarpics/insidecellarnewsmall.jpg');
pic[2] = new banner('images/cellarpics/mainshotwebsmall.jpg',203,'images/cellarpics/mainshotwebsmall.jpg');
pic[3] = new banner('images/cellarpics/MicroCelllar2tileopensmall.jpg',203,'images/cellarpics/MicroCelllar2tileopensmall.jpg');
pic[4] = new banner('images/cellarpics/openmicrosmall.jpg',203,'images/cellarpics/openmicrosmall.jpg');
pic[5] = new banner('images/cellarpics/topopenweb1small.jpg',203,'images/cellarpics/topopenweb1small.jpg');
pic[6] = new banner('images/cellarpics/topweb2small.jpg',203,'images/cellarpics/topweb2small.jpg');
pic[7] = new banner('images/cellarpics/topwebclosed1small.jpg',203,'images/cellarpics/topwebclosed1small.jpg');
/*
pic[8] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg')
*/
var speed = 10;
var kk = pic.length;
var ii;
var hhh;
var nnn;
var myInterval;
var myPause;
var mode = 0;
var imgArray = new Array(kk);
var myLeft = new Array(kk);
for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width
hhh=0
for (nnn=0;nnn<ii;nnn++){
hhh=hhh+pic[nnn].width
};
myLeft[ii] = hhh
};
function ready(){
for (ii=0;ii<kk;ii++){
if (document.images[ii].complete == false){
return false
break
};
};
return true
};
function startScrolling(){
if (ready() == true){
window.clearInterval(myPause)
myInterval = setInterval("autoScroll()",speed)
};
};
function autoScroll(){
for (ii=0;ii<kk;ii++){
myLeft[ii] = myLeft[ii] - 1
if (myLeft[ii] == -(pic[ii].width)){
hhh = 0
for (nnn=0;nnn<kk;nnn++){
if (nnn!=ii){
hhh = hhh + pic[nnn].width
};
};
myLeft[ii] = hhh
};
document.images[ii].style.left = myLeft[ii]
};
mode = 1
};
function stop(){
if (mode == 1){
window.clearInterval(myInterval)
};
if (mode == 0){
window.clearInterval(myPause)
};
};
function go(){
if (mode == 1){
myInterval = setInterval("autoScroll()",speed)
};
if (mode == 0){
myPause = setInterval("startScrolling()",3000)
};
};
myPause = setInterval("startScrolling()",100)
for (ii=0;ii<kk;ii++){
document.write('<a href="' + pic[ii].link + '" target="_blank"><img style="height:131px;position:absolute;top:0;left:' + myLeft[ii] + ';" src="' + pic[ii].name + '" onMouseOver="stop()" onMouseOut="go()" /></a>');
};
Lösung
Im IE funktioniert es. Der Grund dafür ist, dass mit Doctype, das Setzen von CSS-Deklaration Werk verließ anders scheint, dass nur eine Zahl ist nicht genug ..., um es in dieser Funktion Autoscroll ()
funktioniert,Ändern
document.images[ii].style.left = myLeft[ii]
document.images[ii].style.left = myLeft[ii] + "px"
Auch zwei Ihrer Skripte werden nicht geladen, menu.js und js / prettyPhoto.js
Andere Tipps
Der wahrscheinliche Grund ist, dass Sie keine Anführungszeichen um die Attribute in der letzten Zeile des Codes:
document.write('<a href = ' + pic[ii].link + 'target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=131 style=position:absolute;top:0;left:0' + myLeft[ii] + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
document.write('<a href="' + pic[ii].link + '" target="_blank"><img style="height:131px;position:absolute;top:0;left:' + myLeft[ii] + ';" src="' + pic[ii].name + '" onMouseOver="stop()" onMouseOut="go()" /></a>');
Auch ich Ihnen dringend raten Semikolons zu Ihrem Javascript hinzuzufügen.
Schließlich eine Bibliothek verwenden, dies alles zu tun und mehr Schlaf bekommen.