JavaScript 이미지 스크롤러는 DocType로 작동하지 않습니다

Question

웹 페이지에서 이미지를 비주 적으로 자동으로 스크롤 할 수있는 일부 JavaScript 코드에 대해서는 NET을 열심히 검색했습니다. 오랫동안 검색 한 후, 나는 마침내 충분히 가까운 것을 발견했습니다. 그런 다음 가능한 한 많이 사용자 정의하여 원하는 작업을 정확하게 수행하도록했습니다.

이 테스트는 DocType가없는 페이지에서 수행되었으므로 DocType가있는 페이지로 옮겼을 때 JavaScript가 엉망이되어 스크롤을 거부했습니다. 단 하나의 고정 이미지를 보여주었습니다 (Safari 및 Firefox에서)

두 웹 페이지를 Mobileme 사이트에 업로드하여 여러분을 살펴볼 수 있습니다.

DocType가없는 페이지 : web.me.com/zubby

DocType가있는 페이지 : web.me.com/zubby/2.html

JavaScript도 아래에 자세히 설명되어 있습니다. 누군가가 이것으로 나를 도울 수 있다면 정말 감사 할 것입니다.

관련 파일 만 업로드 했으므로 FireBug는 아마도 존재하지 않는 기능에 대해 불평 할 것입니다.

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

즉, 그것은 작동합니다. 그 이유는 DocType를 사용하면 CSS 선언을 설정하는 것이 다르게 작동하기 때문에 숫자 만 충분하지 않은 것 같습니다.

변화

document.images[ii].style.left = myLeft[ii]

에게

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

또한 두 개의 스크립트가로드되지 않습니다. Menu.js 및 JS/PrettyPhoto.js

Answer 2

가능한 이유는 코드의 마지막 줄에 속성에 대한 인용문이 없기 때문입니다.

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

또한 자바 스크립트에 세미콜론을 추가하도록 강력히 조언합니다.

마지막으로, 라이브러리를 사용 하여이 모든 작업을 수행하고 더 많은 수면을 취하십시오.