Javascript Bild Scroller funktioniert nicht mit DOCTYPE

Question

Ich habe das Netz hart für einige Javascript-Code, der mir erlaubt, Bilder automatisch non-stop horizontal auf einer Webseite scrollen. Nach langer Suche stieß ich schließlich auf etwas, das nah genug war. Ich habe es dann so gut wie möglich angepasst, damit es genau das macht, was ich wollte.

Dieser Test wurde auf einer Seite ohne DOCTYPE durchgeführt, und als ich ihn auf eine Seite mit einem DOCTYPE verschoben habe, wurde das Javascript durcheinander gebracht und das Scrollen verweigert. Es zeigte nur ein einzelnes stationäres Bild (auf Safari und Firefox)

Ich habe beide Webseiten auf meine MobileMe-Website hochgeladen, damit ihr es euch anschauen könnt.

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 bin sehr dankbar, wenn mir jemand dabei helfen kann.

Ich habe nur die relevanten Dateien hochgeladen, damit sich Firebug wahrscheinlich über nicht vorhandene Funktionen beschweren wird.

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>'); 
}; 

Answer 1

In 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]

zu

document.images[ii].style.left = myLeft[ii] + "px"

auch zwei Ihrer Skripte werden nicht geladen, menu.js und js/prettyPhoto.js

Answer 2

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, verwenden Sie eine Bibliothek, um all dies zu tun und mehr Schlaf zu bekommen.