Javascript图像滚动条不使用DOCTYPE
我一直在网上搜索一些javascript代码,这些代码允许我在网页上不停地水平滚动图像。经过长时间的搜索,我终于找到了一个足够近的东西。然后我对它进行了尽可能多的定制,使它完全符合我的要求 这个测试是在一个没有DOCTYPE的页面上完成的,所以当我把它移到一个有DOCTYPE的页面上时,javascript变得混乱,拒绝滚动。它只显示了一个固定的图像(在safari和firefox上) 我已经把这两个网页都上传到了我的MobileMe网站,所以你们可以看看 没有DOCTYPE的页面: 包含DOCTYPE的页面: 下面还详细介绍了javascript。如果有人能帮我解决这个问题,我将非常感激 我只上传了相关文件,所以firebug可能会抱怨不存在的功能Javascript图像滚动条不使用DOCTYPE,javascript,html,image,scroll,doctype,Javascript,Html,Image,Scroll,Doctype,我一直在网上搜索一些javascript代码,这些代码允许我在网页上不停地水平滚动图像。经过长时间的搜索,我终于找到了一个足够近的东西。然后我对它进行了尽可能多的定制,使它完全符合我的要求 这个测试是在一个没有DOCTYPE的页面上完成的,所以当我把它移到一个有DOCTYPE的页面上时,javascript变得混乱,拒绝滚动。它只显示了一个固定的图像(在safari和firefox上) 我已经把这两个网页都上传到了我的MobileMe网站,所以你们可以看看 没有DOCTYPE的页面: 包含DOC
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>');
};
var pic=new Array();
功能横幅(名称、宽度、链接){
this.name=name
这个。宽度=宽度
this.link=link
};
pic[0]=新横幅('images/cillarpics/CellarbyNightsall.jpg',203,'images/cillarpics/CellarbyNightsall.jpg');
pic[1]=新横幅('images/cillarpics/insideecellanewsmall.jpg',203,'images/cillarpics/insideecellanewsmall.jpg');
图[2]=新横幅('images/cerllapics/mainshotwebsmall.jpg',203,'images/cerllapics/mainshotwebsmall.jpg');
pic[3]=新的横幅('images/cillarpics/MicroCelllar2tileopensmall.jpg',203,'images/cillarpics/MicroCelllar2tileopensmall.jpg');
pic[4]=新的横幅('images/cillarpics/openmicrosall.jpg',203,'images/cillarpics/openmicrosall.jpg');
pic[5]=新横幅('images/cillarpics/topopenweb1small.jpg',203,'images/cillarpics/topopenweb1small.jpg');
pic[6]=新横幅('images/cillarpics/topweb2small.jpg',203,'images/cillarpics/topweb2small.jpg');
pic[7]=新横幅('images/cillarpics/topwebclosed1small.jpg',203,'images/cillarpics/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')
*/
无功转速=10;
var kk=pic.长度;
var ii;
var-hhh;
var-nnn;
var-myInterval;
var myPause;
var模式=0;
var imgArray=新阵列(kk);
var myLeft=新数组(kk);
对于(ii=0;ii而言,可能的原因是代码最后一行的属性周围没有引号:
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>');
document.write(“”)
文件。写(“”);
另外,我强烈建议您在Javascript中添加分号
最后,使用一个库来完成所有这一切并获得更多的睡眠。在IE中它是有效的。原因是对于doctype,设置css声明左起不同的作用,似乎只有一个数字是不够的…在这个函数autoscroll()中使它工作
改变
document.images[ii].style.left=myLeft[ii]
到
document.images[ii].style.left=myLeft[ii]+“px”
还有,你的两个脚本没有加载,menu.js和js/prettypto.jsLol为Triptych干杯,我做了上述修改,但是javascript仍然没有滚动。我对库不是很好,你会建议哪个库执行相同的功能?是的!!!它终于起作用了。谢谢你,伙计,你太棒了。我只上传了将相关文件发送到服务器以尝试修复此问题,因此我没有麻烦将menu.js和prettypto.js上载到服务器。再次感谢,朋友,祝你一切顺利。