JavaScript صورة سكرولر لا تعمل مع DocType

Question

لقد كنت أبحث عن صافي صعبة بعض رمز JavaScript يسمح لي بتمرير الصور تلقائيا غير توقف أفقيا على صفحة ويب. بعد البحث لفترة طويلة، جاءت أخيرا شيئا كان قريبا بما فيه الكفاية. ثم قمت بتخصيصها قدر الإمكان لجعلها تفعل بالضبط ما أردت القيام به.

تم إجراء هذا الاختبار على صفحة بدون doctype، لذلك عندما نقلت إلى صفحة تحتوي على doctype، حصلت جافا سكريبت على افسالة ورفضت التمرير. لقد أظهرت للتو صورة ثابتة واحدة (في 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 إلى اليسار بشكل مختلف، يبدو أن الرقم فقط ليس كافيا ... لجعله يعمل، في هذه الوظيفة Autoscroll ()

يتغيرون

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

أيضا، أنا نصح لك بشدة أن تضيف فاصلة منقوطة إلى جافا سكريبت.

أخيرا، استخدم مكتبة للقيام بكل هذا والحصول على المزيد من النوم.