Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jobless

Chamar uma função dentro do script

Por , em Javascript

Recommended Posts

Jobless    0

Jobless
Postado

Galera sou iniciante em javascript(estou me esforçando por aprender a linguagem), porém devido ao tempo preciso de ajuda para resolver algo que sozinho iria demorar dias, talvez meses...

 

Creio que para que conhece a linguagem deve ser algo simples...

 

Estou usando um script opensource que é um slideshow de imagens, porém ele só inicia o slideshow se no body da página estiver o comando:

<body onload="slide.start()">

Mas eu preciso que ele inicie os slides automaticamente quando o script for carregado no head (que é onde ele está). Ja tentei de tudo ... mas não consigo chamar a função que é chamada no onload... ja tentei:

slide.start();//coloquei isso no inicio do script para ver se dava certo e nada...

Como poderia fazer para iniciar o slideshow automaticamente sem esperar pelo onload de toda página???

 

Segue o script que estou usando:

<script type="text/javascript">
	function settings(){
		var el = document.getElementById('settings');
		(el.style.display == 'none') ? el.style.display = 'block' : el.style.display = 'none';
	}
</script>
<script type="text/javascript">
/*
$BD:Slide - version 0.9.4$
$LastModified: 04/02/2006$

Sistema Free para uso pessoal ou comercial contanto que os
créditos permaneçam intactos. Eu já nem estou colocando um
monte de coisa pra não deixar o código pesado. ^^

Maiores Informações:
http://my.opera.com/bimonti/
*/

slide = {

	// vetor com os slides
	_imagens : [
			["imgs/slide/01.jpg","Campo","Estrada ao longo de imenso campo verde","1.htm"],
			["imgs/slide/02.jpg","Montanha","Montanha espelhada em lago gelado","2.htm"],
			["imgs/slide/03.jpg","Rio","Rio bravo em paraíso mata adentro","3.htm"],
			["imgs/slide/04.jpg","Praia","Praia de água límpida e areia fina","4.htm"]
		],
	
	
	// ID dos elementos que o sistema modifica
	// ID da imagem do slide
	_slideImg : 'slideImg',
	// ID do link do slide, ou seja, um elemento A
	_linkSlide : 'linkSlide',
	// ID do título do slide, uma div ou span por exemplo
	_titleSlide: 'titleSlide',
	// ID do título do slide, idêntico ao de cima
	_textSlide : 'textSlide',
	// ID da imagem de play|pause
	_playPause : 'playpause',
	// ID da div que mostra ou esconde as opções de customização de tempo
	// essa opção pode ser omitida do usuário, basta retirar o botão
	// settings da página, e como a div já vem com o display:none por
	// padrão o usuário não terá acesso a essas opções.
	_showTimer : 'showTimer',
	

	// variáveis do sistema
	// Daqui para baixo não é necessário alterar mais nada, aqui o sistema
	// cuidará de tudo
	_count : 0,
	_length : null,
	_timeOutID : null,
	_pause : false,
	_timer : 4,
	
	// função que inicia o slide e seta todas os parâmetros necessários
	start : function(){
		with(this){
			_preLoader();
			_length = _imagens.length;
			_work(); 
		}
	},
	
	// faz o pré-carregamento das imagens
	_preLoader : function(){
		for(x in this._imagens){
			var image = new Image();
			image.src = this._imagens[x][0];
		}
	},
	
	// função principal que faz as checagens necessárias
	_work : function(){
		with(this){
			(_count == _length) ? _count = 0 : (_count < 0) ? _count = _length-1 : void(0);
			var current = _imagens[_count];
			_exchange(current);
			if(!_pause){
				(typeof(_timeOutID) == "number") ? clearTimeout(_timeOutID) : void(0);
				_timeOutID = setTimeout(
						function(){
							slide.next();
							fade(0,0,$(_slideImg));
						}, (Number(_timer)*1000)
				);
			}
		}
	},
	
	// função que altera os elementos da página, altere os IDs se necessário
	_exchange : function(img){
		this.$(this._slideImg).src = img[0];
		this.$(this._titleSlide).innerHTML = img[1];
		this.$(this._textSlide).innerHTML = img[2];
		this.$(this._linkSlide).href = img[3];
		this.fade(0,100,this.$(this._slideImg));
	},
	
	// altera para o próximo slide ao clicar no botão Próximo
	next : function(){
		with(this){
			_count++;
			_work();
		}
	},
	
	// altera para o slide anterior ao clicar no botão correspondente
	previous : function(){
		with(this){
			_count--;
			_work();
		}
	},
	
	// pausa e continua a apresentação
	pause : function(){
		var img = this.$(this._playPause);
		if(this._pause){
			this._pause = false;
					img.src = 'imgs/pause.gif';
				img.title = 'Parar';
		}
		else{
			this._pause = true;
					img.src = 'imgs/play.gif';
				img.title = 'Continuar';
		}
		with(this){(typeof(_timeOutID) == "number") ? clearTimeout(_timeOutID) : void(0); _work();}
	},
	
	// controla o tempo de troca de cada slide
	tControl : function(act){
		with(this){
		(act=="m")?((_timer==4)?void(0):_timer=_timer-1):((_timer==9)?void(0):_timer= _timer +1);
			this.$(this._showTimer).innerHTML = _timer+"s";	
		}
		
	},
	
	// altera a opacidade do elemento e suaviza a transição entre os slides
	fade : function (){
		
		var type,signal;
		var from 	= arguments[0];
		var to		= arguments[1];
		var el		= arguments[2];
		
		(document.all) ? type = 'filter' : type = 'opacity';
		(from>to) ? signal = '-' : signal= '+';
		
		if(from >= to/2){
			from = eval(from+signal+10);
		}else{
			from = eval(from+signal+5);
		}
		
		if(type=='opacity'){
			try{el.style[type] = Number(from*0.01); }catch(e){}
		}else{
			try{el.style[type] = 'alpha(opacity='+from+')'; }catch(e){}
		}
		
		if(from != to){
			setTimeout( function(){ slide.fade(from,to,slide.$(slide._slideImg)); } ,50);
		}
	},
	
	// retorna o elemento solicitado através de seu ID
	$ : function(){
		return document.getElementById(arguments[0]);	
	}
}
</script>

Por favor me ajudem...

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Use jQuery e chame a função assim:

 

$(document).ready(function(){
 //funções aqui...
});

Essa função aguarda apenas até que o browser leia todo o CÓDIGO HTML, o onload da window aguarda todo o carregamento, incluindo CSS, Javascripts e imagens...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito