Banner de Destaque com 4 opções

[editorpa 0]

Queria um banner igual esses do shoptime,submarino,etc.

Com um Movieclip para pegar os swf externos,com os 4 botoes.

Movie Clip chamado bn_mc ,Botão bt_1 ,bt_2,bt_3 e bt_4

ex : [1] banner1.swf

[2] banner2.swf

[3] banner3.swf

[4] banner4.sef

Layout em baixo

[editorpa 0]

ja criei,se algum quiser ver Clique aqui

[Elektra 102]

Ainda bugado, né? Ou era para ser assim mesmo?

 

Precisa clicar sobre um dos botões para iniciar a animação. Fica estranho o espaço em branco, nunca vi isso em nenhum site que use banner rotativo.

 

Testei no FF e IE8.

 

Também observei que a cor dos botões não corresponde a cor do swf, assim fica difícil conferir se o arquivo foi carregado corretamente.

 

Mas, parabéns pelo progresso.

 

São detalhes certamente simples de resolver.

 

Uso AS3, fico devendo auxiliar.

 

Abs.

[editorpa 0]

Consegui se alguem quiser o são 1 cod html,1cod css e 1 cod js.

Dimensão das imagens:351 x 208 e da thumbails:49 x 53

html

<link rel="stylesheet" href="css/player.css" type="text/css" />
<div id="contentBox">
<div id="mainContent">

<div class="homeBox" id="homePlayerBox">

<script type="text/javascript" src="js/player.js"></script>
<div id="playerContainer">
<ul id="playerList">
<li id="playerFeature_0" style="background:transparent url([b]imagem[/b]) no-repeat left top">
<h3><a href="" target="_self">[b]Descrição[/b]</a></h3>
</li>
<li id="playerFeature_1" style="background:transparent url([b]imagem[/b]) no-repeat left top">
<h3><a href="" target="_self">[b]Descrição[/b]</a></h3>
</li>
<li id="playerFeature_2" style="background:transparent url([b]imagem[/b]) no-repeat left top">
<h3><a href="" target="_self">[b]Descrição[/b]</a></h3>
</li>
<li id="playerFeature_3" style="background:transparent url([b]imagem[/b]) no-repeat left top">
<h3><a href="" target="_self">[b]Descrição[/b]</a></h3>
</li>
</ul>
<ul id="playerThumbs">
<li id="playerThumb_0">
<h3><a id="th_0" href="javascript:viewThisPlayer(0);" style="background:transparent url([b]thumbail[/b]) no-repeat left top">[b]Descrição[/b]</a></h3>
</li>
<li id="playerThumb_1">
<h3><a id="th_1" href="javascript:viewThisPlayer(1);" style="background:transparent url([b]thumbail[/b])  no-repeat left top">[b]Descrição[/b]</a></h3>
</li>
<li id="playerThumb_2">
<h3><a id="th_2" href="javascript:viewThisPlayer(2);" style="background:transparent url([b]thumbail[/b])  no-repeat left top">[b]Descrição[/b]</a></h3>
</li>
<li id="playerThumb_3">
<h3><a id="th_3" href="javascript:viewThisPlayer(3);" style="background:transparent url([b]thumbail[/b]) no-repeat left top">[b]Descrição[/b]</a></h3>
</li>
</ul>
</div>
<script type="text/javascript">setTimeout('startPlayer()', 100);</script>
</div>
</div>
</div>

css:

ul#featureList li h3 a { display:block; height:234px; margin:0 0 0 0; text-indent:-9999px; width:179px;}
ul#featureList li h3{margin:0px;}
ul#featureList li {list-style:none outside none; position:relative; float:left; padding:0px;}
ul#featureList{display:block; width:180px; margin:0px; padding:0px;}
ul#destacadoList li h3 a { display:block; height:144px; margin:0 5px 0 0; text-indent:-9999px; width:175px;}
ul#destacadoList li h3{margin:0px;}
ul#destacadoList li {list-style:none outside none; position:relative; float:left; padding:0px;margin: 0 10px 7px 0; }
ul#destacadoList{display:block; width:380px; margin:0 0 0 20px; padding:0px;}
ul#tuneinsList li h3 a { display:block; height:110px;  text-indent:-9999px; width:180px;}
ul#tuneinsList li h3{margin:0px; padding: 0px; width:180px;}
ul#tuneinsList li {list-style:none outside none; padding:0px; margin:0 0 3px; width:180px; height:120px;}
ul#tuneinsList{display:block; width:180px; margin:5px 0 0; padding:0px;}

ul#playerList li h3 a { display:block; height:208px; margin:0px; text-indent:-9999px; width:351px;}
ul#playerList li h3{margin:0px;}
ul#playerList li {list-style:none outside none; padding:0px; margin:7px; display:none;}
ul#playerList{display:block; width:365px; height:233px; margin:0px; padding:0px; position:absolute; background:transparent url(fondo_player.jpg) no-repeat top left; left: 0px;}	
*ul#playerList{left: 5px;}

ul#playerThumbs li h3 a { display:block; height:49px; text-indent:-9999px; width:49px; border:2px solid #009900;}
*ul#playerThumbs li h3 a { display:block; height:49px; text-indent:-9999px; width:53px; border:2px solid #009900;}
ul#playerThumbs li h3 a:hover{border:4px solid #00CC33;}
ul#playerThumbs li h3{margin:4px;}
ul#playerThumbs li h3:hover{margin:2px;}
ul#playerThumbs li {list-style:none outside none; padding:0px; display:block;position:absolute;}
ul#playerThumbs{display:block; margin:20px 0 0 290px; padding:0px; position:absolute; height:208px; left: 0px;}
*ul#playerThumbs{left: 5px;}
#playerThumb_0 {margin-top: 0px;}
#playerThumb_1 {margin-top: 60px;}
#playerThumb_2 {margin-top: 120px;}
#playerThumb_3 {display:none}

js:

var myPosition = 0;
	var MAXITEMS = 4;
	var PLAYERDELAY = 5000;
	var myInterval;
	function startPlayer()
	{
		setNextItemInPlayer();
		myInterval = setInterval('setNextItemInPlayer()',PLAYERDELAY);
	}
	
	function setNextItemInPlayer()
	{
		if (myPosition >= MAXITEMS ) myPosition = 0;
		for(var i=0; i<MAXITEMS;i++)
		{
			if (i == myPosition)
			{
				document.getElementById("playerFeature_"+i).style.display = "block";
				setTumbs(i);
			}else{
				document.getElementById("playerFeature_"+i).style.display = "none";
			}
		}
		myPosition++;
	}
	
	function setTumbs(actual)
	{
		actual++;
		var thumbIndex = (actual >= (MAXITEMS) )? 0: (actual);
		
		//var orden = "";
		var arrThumbsPosition = [0,60,120,-1000];
		for (var i = 0; i < MAXITEMS; i++)
		{	
			document.getElementById("playerThumb_" + i).style.marginTop = arrThumbsPosition[thumbIndex]+"px";
			//orden += thumbIndex+" -> "+arrThumbsPosition[thumbIndex]+"\n";
			thumbIndex++;
			if( (thumbIndex) >= (MAXITEMS))
			{ 
				thumbIndex = 0;
			}
		}
		//alert (orden);
	}
	
	function viewThisPlayer(id)
	{
		myPosition = id;
		myInterval = clearInterval(myInterval);
		startPlayer();
	}	var myPosition = 0;
	var MAXITEMS = 4;
	var PLAYERDELAY = 5000;
	var myInterval;
	function startPlayer()
	{
		setNextItemInPlayer();
		myInterval = setInterval('setNextItemInPlayer()',PLAYERDELAY);
	}
	
	function setNextItemInPlayer()
	{
		if (myPosition >= MAXITEMS ) myPosition = 0;
		for(var i=0; i<MAXITEMS;i++)
		{
			if (i == myPosition)
			{
				document.getElementById("playerFeature_"+i).style.display = "block";
				setTumbs(i);
			}else{
				document.getElementById("playerFeature_"+i).style.display = "none";
			}
		}
		myPosition++;
	}
	
	function setTumbs(actual)
	{
		actual++;
		var thumbIndex = (actual >= (MAXITEMS) )? 0: (actual);
		
		//var orden = "";
		var arrThumbsPosition = [0,60,120,-1000];
		for (var i = 0; i < MAXITEMS; i++)
		{	
			document.getElementById("playerThumb_" + i).style.marginTop = arrThumbsPosition[thumbIndex]+"px";
			//orden += thumbIndex+" -> "+arrThumbsPosition[thumbIndex]+"\n";
			thumbIndex++;
			if( (thumbIndex) >= (MAXITEMS))
			{ 
				thumbIndex = 0;
			}
		}
		//alert (orden);
	}
	
	function viewThisPlayer(id)
	{
		myPosition = id;
		myInterval = clearInterval(myInterval);
		startPlayer();
	}

[Elektra 102]

Este, bem simples, fiz da minha cabeça mesmo. Só para estudo, ainda não recebeu nenhum tratamento.

 

Com arquivos internos, via timeline, movie clips individuais e uma gambiarra para a transição em alpha.

 

Alterna em sequência, a cada 4 segundos (fps 30).

 

Ao clicar nos botões seleciona a exibição do item, ao clicar sobre o banner, carrega a página externa de cada produto.

 

Eis um Print Screen: banner_4

 

Minha fonte de inspiração na época foi o banner da Livraria Saraiva, já atualizaram para outro melhor.