Ir para conteúdo

POWERED BY:

Arquivado

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

Fabio Jp

[Resolvido] banner randomico javascript

Por , em Javascript

Recommended Posts

Fabio Jp    0

Fabio Jp
Postado

Bom dia amigos..

 

Eu consegui um código de banner randomico muito bom..

ele altera as imagens sem a necessidade de um refresh manual ( f5 ~ meta-tag ),

mas alem disso eu gostaria de incluir links nesses banners...

mas cada banner teria um link direfente.. e alguns nem link teriam..

 

la vai o codigo:

 

-----------------js

 

matFigura = new Array(3)
matFigura[0] = "01.jpg"
matFigura[1] = "02.jpg"
matFigura[2] = "03.jpg"
numFigura = 0
totalFigura = 3
function mudaBanner() {
document.imgBanner.src= matFigura[numFigura]
numFigura +=1
if (numFigura == totalFigura) {numFigura = 0}
setTimeout("mudaBanner()", 2000)
}

-----------------html

 

<body onLoad="mudaBanner()">

<img name="imgBanner" width="205" height="128" border="0" alt"" />

 

 

 

-------

 

Eu nao manjo em javascript.. ateh tentei atravez de um outro script que havia

link adaptar a esse ai que eu postei.. mas nao adiantou muito.. pois e nao

manjo nadinha de javascript..

 

de qualquer forma.. se ajudar, o outro script era esse :

 

---js

var max = 10;
var nrImages = 3;
function makeImages() {
this[0] = "01.jpg";
this[1] = "02.jpg";
this[2] = "03.jpg";
this.length = nrImages;
}
function makeLinks() {
this[0] = "http://www.link1.com.br";
this[1] = "http://www.link2.com.br";
this[2] = "http://www.link3.com.br";
this.length = nrImages;

}
var vetImages = new makeImages();
var vetLinks = new makeLinks();
var x = Math.round(Math.random()*max);
var y = max / nrImages;
for(var cont = 1;cont*y<= max;cont++) {
if (x <= (cont*y)) {
document.write("<a href="+vetLinks[cont-1]+" target=_blank><img src="+vetImages[cont-1]+" border=0></a>");
break;
}
}
---

 

Como eu disse, nao manjo de js, e caso de para adaptar o primeiro js ao segundo,

sera que da pra tirar esse esquema de document.write e colocar atravez do body onload,

pois eu gostaria de ter o controle de onde colocar, atraves da imagem (<img name="imgBanner" width="205" height="128" border="0" alt"" />)..

 

Estou on aqui caso voces nao estejam intendendo..

bom eh isso ai.. quem puder me ajudar eu agradeço bastante..

valew..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Muito bom seu código..

só preciso adaptar ele para trocar sem a necessidade

de atualizar a pagina..

 

Creio eu que seja essa parte que preciso incluir de

alguma forma no seu script

 

function mudaBanner() {
document.imgBanner.src= matFigura[numFigura]
numFigura +=1
if (numFigura == totalFigura) {numFigura = 0}
setTimeout("mudaBanner()", 2000)
}

só preciso descobrir como

 

^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Ai gente achei um bem interessante aqui.. um pouco mais complexo..

Bemmmm funcional e agrada bastante..

Bom, acho que essa versao eh free.. pois eu peguei em um site,

mas nao me lembro onde foi, pois baxei muitos pra testar depois

e acabei nao sabendo de onde veio esse..

Só da pra saber que eh da JoomlaWorks..

 

 

----------------mod_jw_sir.js

 

var delay = 5000;
var transition = 40;
var imageContainer = 'jw-sir';
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
	if(!d.getElementById || !d.createElement)return;
	imgs = d.getElementById(imageContainer).getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[code].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	setTimeout(so_xfade,delay);
}
function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;
	cOpacity-=.05; 
	nOpacity+=.05;
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,delay);
	} else {
		setTimeout(so_xfade,transition);
	}
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
}
function hideLoading() {document.getElementById(preLoader).style.display = 'none';}

// Load everything up
function init_ahr() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
		so_init();
		hideLoading();
};
// DOM2
if ( typeof window.addEventListener != "undefined" ) { window.addEventListener( "load", init_ahr, false ); }
// IE 
else if ( typeof window.attachEvent != "undefined" ) { window.attachEvent( "onload", init_ahr ); }
else {
	if ( window.onload != null ) {
		var oldOnload = window.onload;
		window.onload = function ( e ) {
			oldOnload( e );
			init_ahr();
		};
	}
	else 
		window.onload = init_ahr;
}[/code]


[b]
----------------mod_jw_sir.css[/b]
[code]ul#jw-sir {position:relative;list-style:none;list-style-image:none;margin:0px auto;padding:0px;overflow:hidden;border:none;background:none;}
ul#jw-sir li {list-style:none;margin:0px;padding:0px;border:none;background:none;}
ul#jw-sir li a {margin:0px;padding:0px;border:none;background:none;}
ul#jw-sir li a img {display:none;position:absolute;top:0;left:0;border:none;background:none;}
ul#jw-sir li img {display:none;position:absolute;top:0;left:0;border:none;background:none;}
ul#jw-sir li#jw-sir-loading {background:#fff url(loading.gif) no-repeat center;}
ul#jw-sir li#jw-sir-loading-black {background:#000 url(loading_black.gif) no-repeat center;}[/code]




[b]----------------index.html[/b]
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<script language="javascript" type="text/javascript">
<!--
var embedSIRCSS = '<' + 'style type="text/css" media="all">'
+ '@import "mod_jw_sir.css";'
+ 'ul#jw-sir,ul#jw-sir li#jw-sir-loading {width:205px;height:128px;}'
+ '</' + 'style>';
document.write(embedSIRCSS);
-->
</script>
<script type="text/javascript" src="mod_jw_sir.js"></script>
<script type="text/javascript">var delay=1000;var transition=40;var preLoader='jw-sir-loading';</script>

<ul id="jw-sir">
  <li id="jw-sir-loading">
  </li>
  <li>
  <a href="http://www.joomlaworks.gr">
  <img src="01.jpg" title="JoomlaWorks Simple Image Rotator" alt="JoomlaWorks Simple Image Rotator" />
  </a>
  
  </li>
  <li>
  <a href="http://www.joomlaworks.gr">
  <img src="02.jpg" title="JoomlaWorks Simple Image Rotator" alt="JoomlaWorks Simple Image Rotator" />
  </a>
  
  </li>
  <li>
  <a href="http://www.joomlaworks.gr">
  <img src="03.jpg" title="JoomlaWorks Simple Image Rotator" alt="JoomlaWorks Simple Image Rotator" />
  </a>
  </li>
  </ul>

</body>	
</html>

-----------

 

 

 

 

é isso ai.. espero que ajude muita gente..

 

abraçooo..

 

seria bom tambem se alguem soubesse um parecido com o da ""IG"..

 

bastante agradavel tambem.. soh nao sei se eh free..

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