Javascript imagem scroller não trabalhar com DOCTYPE
-
12-09-2019 - |
Pergunta
Eu tenho procurado o disco net por algum código JavaScript que me permite imagens automaticamente rolagem non-stop na horizontal em uma página web. Depois de um longo tempo pesquisando, eu finalmente me deparei com algo que estava perto o suficiente. Eu, então, personalizado-lo, tanto quanto possível para ele fazer exatamente o que eu queria fazer.
Este teste foi feito em uma página sem um DOCTYPE, por isso, quando me mudei-o para uma página que tinha um DOCTYPE, o javascript ficou confuso e se recusou a rolagem. Ele só mostrou uma única imagem estacionária (no Safari e Firefox)
Fiz upload de ambos os webpages para o meu site MobileMe para que vocês possam ter um olhar.
A página sem um DOCTYPE: web.me.com/zubby
A página com um DOCTYPE: web.me.com/zubby/2.html
o javascript também é detalhado abaixo. Eu serei extremamente grato se alguém pode me ajudar com isso.
Eu só upload dos arquivos relevantes de modo firebug provavelmente vai reclamar sobre funções inexistentes.
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>');
};
Solução
No IE ele funciona. A razão é que, com doctype, estabelecendo declaração css deixou obras de forma diferente, parece que apenas um número não é suficiente ... para fazer o trabalho, nesta função autoscroll ()
Mudança
document.images[ii].style.left = myLeft[ii]
para
document.images[ii].style.left = myLeft[ii] + "px"
Além disso, dois dos seus scripts não carregar, menu.js e js / prettyPhoto.js
Outras dicas
A razão provável é que você não tem aspas em torno dos atributos na última linha do seu código:
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>');
Além disso, eu aconselhá-lo fortemente para adicionar ponto e vírgula à sua Javascript.
Por fim, use uma biblioteca para fazer tudo isso e dormir mais.