Jump to content


Photo

Menu Scroll Em Movimento


  • Faça o login para participar
2 replies to this topic

#1 TheDenny

TheDenny

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 01/06/2010, 15:04

Olá,

Preciso fazer um menu scroll contínuo em movimento, mas não está saindo. Já tentei vários códigos, mas nunca dá totalmente certo. O código tem que ser em Javascript, não podendo usar flash.

<html>

<head>
<title>Scroller</title>
<script>
///////////////////
//www.fortochka.com
//Alexander Babichev 2006 Coopyright
//This script is free for private use. Otherwise a $10 fee per a site is required.
//the script can be modified but the copyright notice should be left unchanged.
///////////////////


var pic = new Array()

function banner(name, width, link, label){
this.name = name
this.width = width
this.link = link
this.label = label
}

pic[0] = new banner('URL',102,'img/1.jpg','Imagem 1')
pic[1] = new banner('URL',102,'img/1.jpg','Imagem 2')
pic[2] = new banner('URL',102,'img/1.jpg','Imagem 3')
pic[3] = new banner('URL',102,'img/1.jpg','Imagem 4')
pic[4] = new banner('URL',102,'img/1.jpg','Imagem 5')

var speed = 50

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()",3000)
</Script>

<body bgcolor='#eeffff'>
<script>
for (ii=0;ii<kk;ii++){
document.write(' <a href = ' + pic[ii].link + ' target="_blank" id=""><img space=0 hspace=0 vspace=0 border=0 height=75 style=position:absolute;top:0;left:' + myLeft[ii] + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go() alt='+ pic[ii].label + '></a>')
}
</Script>
</body>

</html>


Esse código, quando sozinho, pega perfeitamente. MAs ao tentar inseri-lo em uma div, fica muito desconfigurado (até porque tenho 39 imagens). Além disso, seria interessante que essas imagens tivessem um label. Não preciso continuar com esse código, foi apenar um ponto de partida.

Obrigado

#2 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 02/06/2010, 21:59

Amigo,

existe Jquery e com ele vc faz isso que vc quer de uma maneira fácil, rápida e com resultados extremamente impressionantes. Vc o conhece?
Dê uma olhada nele e seus plugins para o que vc quer...

Abraço!
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#3 TheDenny

TheDenny

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 10/06/2010, 15:46

Obrigado, cara! Não conhecia JQuery. Agora isso vai facilitar muito meu trabalho.




2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq