Banner Estilo Uol

Silvio Oliveira · Outubro 18, 2007

Ola pessoal.

Como faco um banner de noticias estilo o uol?

Com img e textos vindos do db.

.Andreia. · Outubro 19, 2007

Por vir de um BD, você precisará usar uma linguagem de programação

Silvio Oliveira · Outubro 25, 2007

então eu utlizo java.

Ele recebe uma lista de imagen/texto, acredito q seja esta a logica.

E o script disto?

Peguei este exemplinho basico aqui.

Mas não funciona.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
    //function banner(){
        matFigura = new Array(3);
        matFigura[0] = "../../_img/botoes/buscar.gif";
        matFigura[1] = "../../_img/botoes/buscarInterno.gif";
        matFigura[2] = "../../_img/botoes/sair.gif";
        
        numFigura = 0;
        totalFigura = 3;
        
        function mudaBanner(){
            
            document.imgBanner.src = matFigura[numFigura]
            numFigura + 1;
            
            if(numFigura == totalFigura){
                numFigura = 0;
            }
            
            setTimeout("mudaBanner()", 2000);
        
        }
        
        
    
    //}
    
</script>



</head>

<body onLoad="mudaBanner();">
<img name="imgBanner" border="0" width="100" height="100">
</body>
</html>

Achei este script aqui tb. alguém pode me dizer o que esta acontecendo aqui?

<html>
<head>

<title>Painel Rotativo</title>

<style type="text/css">
#painel {width:200px;height:215px;background-color:#575757;float:left;}
div>#painel {top:0;} /*hack*/
#painel-conteudo {display:none;}
#painel h2 {font-size:13px;padding:0 1em;margin:0;}
#painel h2 a {color:#fff;}
#painel h2 a:visited {color:#eee;}
#painel #imgslide {width:200px;height:150px;margin:0 0 0.6em 0;}
#painel #proximo, #painel #anterior, #painel #pause {cursor:pointer;cursor:hand;position:absolute;}
#painel #prox-ant {position:absolute;top:214px;width:13.8em;height:10px;left:10;}
#painel #anterior {left:1px;}
#painel #proximo {left:131px;}
#painel #pause {left:92px;}
#painel #to-blend {opacity:0.99;zoom:1;}

</style>




<script type="text/javascript">
var d=document;
$ = function(id) {
    if(!arguments[1]) return document.getElementById(id);
    else document.getElementById(id).style[arguments[1]]=arguments[2];
}


function delItem(arr,item){
for(;item<arr.length;item++) arr[item]=arr[item + 1];
arr.length=arr.length-1;
} function goURL(){
(Item[atual][3].indexOf('_blank')!=-1) ? window.open(Item[atual][3].substring(0,Item[atual][3].indexOf(' '))) : location.href=Item[atual][3];
} function startSlide(){ 
loadImages();
if(!paused) timeoutId=setTimeout('changeImg(1)',6000);
} function initialize(){
timeoutId=0;
textareaContent=d.form_cr.select_cr.value.split(/[\r\n]/i);
Item = new Array();
for(x=0,y=0;x<textareaContent.length;x++){ 
    if(textareaContent[x].length>30) Item[y++]=textareaContent[x].split('|');
    }
for(i=Item.length-1;i>=0;i--){
    Item[i][0]=Item[i][0].replace(/([ \n\t\r])+/, " ");
    Item[i][4]=(Item[i][4].length<3) ? '' : '<img src="'+Item[i][4]+'" border="0" style="margin-left:4px;" />';
    if(Item[i][1].length<3||Item[i][3].length<3||Item[i][2].length<3||Item[i][0].length<2) delItem(Item,i);
    }
if(Item.length==1) d.write('<style>#anterior,#proximo,#pause{visibility:hidden;}</style>');
atual = Math.random().toString().substring(2,6) % Item.length;
} function startPanel(){
usaCredito = '';
initialize();
if(arguments.length>0){
    if(!isNaN(arguments[0])) atual = arguments[0];
    }
if(paused) {imgpause='on'; altpause='alt="Ligar" title="Ligar"';}
else {imgpause='off'; altpause='alt="Parar" title="Parar"';}
d.write('<div id="to-blend">'+usaCredito+'<a href="java script:goURL()"><img src="'+Item[atual][1]+'" id="imgslide" name="img1" border="0" title="'+Item[atual][0]+'" alt="'+Item[atual][0]+'"></a>');
d.write('<h2><a href="java script:goURL()" id="p-link"><span id="txt1">'+Item[atual][2]+'</span><span id="icon-area">'+Item[atual][4]+'</span></a></h2></div>');
d.write('<div id="prox-ant"><a href="java script:void(0)" id="anterior" onclick="if(okToGo)changeImg(-1)"><img src="imagens/anterior.gif" border="0" /></a><img src="imagens/pause.gif" onclick="pauseSlide()" id="pause" '+altpause+' />');
d.write('<a href="java script:void(0)" id="proximo" onclick="if(okToGo)changeImg(1)"><img src="imagens/proximo.gif" border="0" /></a></div>');
} function pauseSlide(){
if(paused){
    $('pause').src='imagens/pause.gif';
    $('pause').title='Parar'; $('pause').alt = 'Parar';
    d.cookie="homeUOLpause=0;domain=.uol.com.br;expires=Thu, 2 Aug 1970 20:47:11 UTC;";         
    paused=false;
    startSlide();
}else{
    clearTimeout(timeoutId);
    d.cookie="homeUOLpause=1;domain=.uol.com.br;expires=Thu, 2 Aug 2222 20:47:11 UTC;";     
    $('pause').src='imagens/pause1.gif';
    $('pause').title='Ligar'; $('pause').alt = 'Ligar';
    paused = true;
} }

var okToGo=false;
var paused=(d.cookie.indexOf('homeUOLpause=1')!=-1) ? true : false;
onload=startSlide;

</script>
</head>





<body bgcolor="#c5c5c5">
<form name="form_cr" action="" id="painel-conteudo"><textarea name="select_cr" cols="0" rows="0">
Figura 1|imagens/Figura1.jpg|Link 01<br> Escreva o que quiser|link1.html|imagens/foto.gif|
Figura 2|imagens/Figura2.jpg|Link 02<br> Escreva o que quiser|link2.html||
Figura 3|imagens/Figura3.jpg|Link 03<br> Escreva o que quiser|link3.html||
Figura 4|imagens/Figura4.jpg|Link 04<br> Escreva o que quiser|link4.html|imagens/foto.gif|
Figura 5|imagens/Figura5.jpg|Link 05<br> Escreva o que quiser|link5.html|imagens/foto.gif|
Figura 6|imagens/Figura6.jpg|Link 05<br> sdkaskjdhkjsahdkh|link6.html|imagens/foto.gif|
|||||
</textarea></form>
        

<div id="painel">
                    <script type="text/javascript">startPanel(0);</script>
                   </div>



<script type="text/javascript">

// painel rotativo //
function changeOpac(opacity){
var obj = $('to-blend').style;
obj.opacity=(opacity/101);
obj.MozOpacity=(opacity/101);
obj.KhtmlOpacity=(opacity/101);
} function blend(imagefile){
var speed=7;
var timer=0;
for(i=100;i>0;i-=2) setTimeout('changeOpac('+i+')', timer++ * speed);
setTimeout('changeContent()', timer * speed);
for(i=0;i<=100;i+=2) setTimeout('changeOpac('+i+')', timer++ * speed);
} function changeImg(id){
clearTimeout(timeoutId);
atual+=parseInt(id);
if(atual>Item.length-1) atual=0;
if(atual<0) atual=Item.length-1;
if(imgDsp[atual].complete==false){
    atual--;
    timeoutId = setTimeout('changeImg('+id+')',500);
    return;
    } 
if(d.all && navigator.userAgent.indexOf('Opera')==-1){
    try {
    oDiv = $('to-blend');
    oDiv.style.filter="blendTrans(duration=0.7)";
       oDiv.filters.blendTrans.apply();
    oDiv.filters.blendTrans.play();
    changeContent();
    } catch(e) { changeContent(); }
} else { blend(); }
if(!paused) timeoutId=setTimeout('changeImg(1)',6000);
} function loadImages(){
imgDsp = new Array();
for(n=0;n<Item.length;n++){
    imgDsp[n]=new Image();
    imgDsp[n].src=Item[n][1];
    }
okToGo = true;
} function changeContent(){
d.img1.src=imgDsp[atual].src;
d.img1.alt=d.img1.title=Item[atual][0];
$('txt1').innerHTML=Item[atual][2];
if(usaCredito!='') $('credito').innerHTML=Item[atual][0];
$('icon-area').innerHTML=Item[atual][4];
}

</script>

</html>

<!-- -->

Gustavo Moraes · Outubro 25, 2007

eu uso esse script no meu site , porem não uso com BD , tenho q inserir manualmente as noticias diariamente

Silvio Oliveira · Outubro 29, 2007

o q eu eu preciso é de um que atualize do db.

tentei implementar este mas ta estranho. não rolou.

Maio 2, 2008

Amigo, creio que você pode utilizar este mesmo script utilizando php (ex) incluso para buscar os campos do bd, vou utilizar ele aqui para o meu site tb...

[]´s

Entrar

Banner Estilo Uol

Pergunta

Silvio Oliveira

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

Silvio Oliveira

Link para o comentário

Compartilhar em outros sites

Gustavo Moraes

Link para o comentário

Compartilhar em outros sites

Silvio Oliveira

Link para o comentário

Compartilhar em outros sites

Guest --Toni --

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades