Javascript图像滚动不与DOCTYPE一起使用 [英] Javascript image scroller not working with DOCTYPE

问题描述

我一直在努力寻找一些JavaScript代码，让我可以在网页上自动滚动图像。经过漫长的搜索，我终于找到了足够接近的东西。然后我尽可能地对它进行了定制，以使其完成我想要的功能。

这个测试是在没有DOCTYPE的页面上完成的，所以当我移动它转到一个有DOCTYPE的页面，javascript被搞砸了，并且拒绝滚动。它只显示了一个固定的图像（在safari和firefox上）。

我已将这两个网页上传到我的MobileMe网站，以便您可以看一看。

没有DOCTYPE的网页： web.me.com / zubby

具有DOCTYPE的页面： web.me.com/zubby/2.html

javascript也在下面详细介绍。我会非常感激，如果有人可以帮助我。

我只上传相关文件，所以萤火虫可能会抱怨不存在的功能。

  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'）; 
 / * 
图片[8] =新横幅（'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）; （ii = 0; ii< kk; ii ++）{
 imgArray [ii] = new Image（）
 imgArray [ii] .src = pic [ii]的
 
。名称
 imgArray [ii] .width = pic [ii] .width 
 
 hhh = 0 
（nnn = 0; nnn  hhh = hhh + pic [nnn] .width 
}; 
 myLeft [ii] = hhh 
}; 
 
 function ready（）{
 for（ii = 0; ii  if（document.images [ii] .complete == false）{
返回false 
 break 
}; 
}; 
返回true 
}; 
 
 
函数startScrolling（）{
 if（ready（）== true）{
 window.clearInterval（myPause）
 myInterval = setInterval（ autoScroll（），speed）
}; 
}; 
 
 
 function autoScroll（）{
 for（ii = 0; ii  myLeft [ii] = myLeft [ii]  -  1 $ （nnn = 0; nnn< kk; nnn ++）{（b）b 
 $ b if（myLeft [ii] ==  - （pic [ii] .width））{
 hhh = 0 
 { 
 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）
}; 
}; 
 
函数go（）{
 if（mode == 1）{
 myInterval = setInterval（autoScroll（），speed）
}; 
 if（mode == 0）{
 myPause = setInterval（startScrolling（），3000）
}; 
}; 
 
 myPause = setInterval（startScrolling（），100）
 
（ii = 0; 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>'）; 
}; 
  

解决方案

原因在于使用doctype时，设置css声明的工作方式不同，似乎只有一个数字是不够的......为了使其工作，在此函数中使用autoscroll（）

变更

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

至

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

另外，您的两个脚本不会加载，menu.js和js / prettyPhoto.js

I've been searching the net hard for some javascript code that allows me to automatically scroll images non-stop horizontally on a webpage. After a long time searching, I finally came across something that was close enough. I then customised it as much as possible to make it do exactly what I wanted it to do.

This testing was done on a page without a DOCTYPE, so when I moved it over to a page that had a DOCTYPE, the javascript got messed up and refused to scroll. It just showed a single stationary image (on safari and firefox)

I've uploaded both webpages to my MobileMe site so you guys can have a look.

The page without a DOCTYPE: web.me.com/zubby

The page with a DOCTYPE: web.me.com/zubby/2.html

the javascript is also detailed below. I'll be extremely thankful if someone can help me out with this.

I only uploaded the relevant files so firebug will probably complain about non-existent functions.

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

解决方案

In IE it works. The reason is that with doctype, setting css declaration left works differently, seems that only a number is not enough...to make it work, in this function autoscroll()

Change

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

to

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

Also, two of your scripts don't load, menu.js and js/prettyPhoto.js

这篇关于Javascript图像滚动不与DOCTYPE一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！