5 replies to this topic

[André - MundoNX]

Olá gente já fiz vários teste aqui só q não consegui acerta nem uma para cria um menu de destaque igual do site da imasters se algum tem algum tutorial ai legal ou se tem um script deste ai posta ai para mim.. por favor.


Obrigado e abraços

Attached Files

•  imas_.jpg   109.44KB   20 downloads

[bdoweb]

cara dá uma procurada no google por slideshow com javascript ... há muitos prontos por ai ... ai é só vc ver o que vc prefere ....

[]'s

[Raphaell]

Olá brother,

Isso aí que você quer fazer, é feito em Flash pelo menos o do iMasters é !

Então tá procurando no lugar errado em ?

Abraço !

[André - MundoNX]

Olá gente vlw pelas dicas, eu vi vários só que acabei pegando este aqui do site da virgula.

<script type="text/javascript">
		 <!--
		 // Media Box
		 // Arrays da chamada
		 imgSrc = new Array('http://www.virgula.com.br/tecnologia/fotos/20070723182005.jpg','http://www.virgula.com.br/tecnologia/fotos/20070723182057.jpg','http://www.virgula.com.br/tecnologia/fotos/20070723182302.jpg');
		 lnkSrc = new Array('http://www.virgula.com.br/tecnologia/techNews.php?id=452','http://www.virgula.com.br/tecnologia/techNews.php?id=453','http://www.virgula.com.br/tecnologia/techNews.php?id=454');
		 lnkTyp = new Array('_self','_self','_self');
		 titSrc = new Array('TECLADO DE SILICONE','MOUSE PARA OS PÉS','UMA INVENÇÃO DE PESO');
		 txtSrc = new Array('É possível limpá-lo e dobrá-lo, para uso médico','Deixe suas mãos livres para fazer o que quiser','Chaveiro com balança segue a onda do futuro');
		 altSrc = new Array('Divulgação','Divulgação','Divulgação');
		 
		 // Se tem apenas 1 imagem, não exibe próximo/anterior
		 if(imgSrc.length == 1)
		 {
			document.write('<style type="text/css">#anterior, #proxima{ visibility: hidden; }</style>');
			// Escolhe uma imagem inicial randomicamente
			atual = 0;
		 } else {
			// Escolhe uma imagem inicial randomicamente
			atual = Math.random().toString().substring(2,6) % imgSrc.length;
		 }
		 // Pre-load das imagens
		 imgDsp = new Array();
		 for(n=0; n<imgSrc.length; n++) {
			imgDsp[n] = new Image();
			imgDsp[n].src = imgSrc[n];
		 }
		 timeoutId = 0;
		 onload = startSlide;

		 function changeImg(id)
		 {
			clearTimeout(timeoutId);
			atual += parseInt(id);
			if(atual>imgSrc.length-1) atual = 0;
			if(atual<0) atual = imgSrc.length-1;
			if(document.all) {
			   document.images.mb_img.style.filter="blendTrans(duration=1)";
			   document.images.mb_img.filters.blendTrans.Apply();
			   document.images.mb_img.filters.blendTrans.Play();
			}
			document.mb_img.src = imgDsp[atual].src;
			document.mb_img.alt = document.mb_img.title = altSrc[atual];
			gid('lnkHref_0').href = gid('lnkHref_1').href = lnkSrc[atual];
			gid('lnkHref_0').target = gid('lnkHref_1').target = lnkTyp[atual];
			gid('lnkHref_2').innerHTML = titSrc[atual];
			gid('lnkHref_3').innerHTML = txtSrc[atual];
			timeoutId = setTimeout("changeImg(1)",4000);
		 }
		 function startSlide() {
			timeoutId = setTimeout("changeImg(1)",4000);
		 }
		 //-->
		 </script>

	<!-- IMG GRANDE -->
	<div id="mediaBox" style="">
	
	<a id="lnkHref_1" href="#">
	<img src="media/images/null.gif" name="mb_img" border="0" class="img">
	</a>
	
	<!-- IMG ANTERIOR -->
	<a href="java script:changeImg(-1);" id="mediaBoxAnterior">
	<img src="media/images/home_setinha_esq.jpg" alt="<<" border="0" 
	style="border: none;float: left; margin: 5px 0 10px 0;" />
	</a>
	
	
	<!-- TÍTULO -->
	<a href="#" style="float: left; width: 215px;text-align: left;text-decoration: none; margin: 5px 0 0 0" id="lnkHref_0">
	
	<h2 style="float: left;font-size: 13px;width: 100%;	margin: 0 0 5px 0;	padding: 0;color: #444;" id="lnkHref_2">
	TECLADO DE SILICONE			</h2>
	<!-- TEXTO -->
	<p style="float: left;margin: 0;padding: 0;width: 100%;color: #444;text-decoration: none;" id="lnkHref_3">
	É possível limpá-lo e dobrá-lo, para uso médico			</p>
	<br />
	</a>	
	
	<!-- IMG PRÓXIMA -->
	
	<a href="java script:changeImg(1);" id="proxima">
	<img src="media/images/home_setinha_dir.jpg" alt=">>" 
	style="margin: 5px 0 10px 0;	padding: 0;	float: left; border: none;" />
	</a>	</div>
	
	<script type="text/javascript">changeImg(1);</script>
	</div>

<script type="text/javascript">
// Get ID
function gid(s) {
   if(document.layers) {
	  return document.layers[s];
   } else if(document.all && !gid) {
	  return document.all[s];
   } else {
	  return document.getElementById(s);
   }
}
</script>

[bimonti]

A princípio, o do Imasters é feito com javascript.

Eu tenho um modelo que eu fiz: http://my.opera.com/bimonti/

Procura lá que eu não lembro de cabeça o endereço. É parecido com o do imasters, só precisa mudar as folhas de estilo. A única diferença é que eu não coloquei a opçõa de mostrar o número de slides: 1 | 2 | 3, etc...

[André - MundoNX]

bimonti, vlw... vou testa