Sistema de Slide em HTML tipo o do baxiaki para seu blog
|
Como vocês podem ver o codigo é grande deixei destacado com cores diferentes as partes que devem ser mudadas no codigo.
Aconselho quando for usar o codigo não pense em fazer tudo de uma vez va trocando uma coisa e vendo oque vai mudando mude as coisas aos poucos. para quem quer um sistema de slide mais simples apenas para fotos pode utilizar o desde site http://www.slide.com |
Codigo
_
<style
type="text/css">
#tv a {
font-size:16px;
font-weight:bold;
}
#tv span {
color:#434343;
font-size:12px;
font-weight:normal;
}
#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}
#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}
#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}
#tv .opac {
margin-bottom:5px;
opacity:1;
}
#tv .transp {
margin-bottom:5px;
opacity:0.1;
}
#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}
#tv {
background:url("http://img31.imageshack.us/img31/2656/tvbg.png") no-repeat scroll 0 0 transparent;
float:left;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;
width:344px;
}
#corpoh {
text-align:left;
}
</style>
<div id="tv">
<script type='text/javascript'>
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);
// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);
//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;
</script>
<div id="tvshow">
<!-- SLIDE INICIAL-->
<a href="http://www.baixaki.com.br/download/google-chrome-6-0-beta.htm"><img height="177" width="354" src="http://www.baixaki.com.br/imagens/65395/106595.jpg" title="Google Chrome 6 Beta" />
Google Chrome 6 Beta
<br /><span>
As atualizações para o navegador do Google não param! Experimente a nova versão de testes liberada.
</span></a></div>
<div id="nav">
<!-- SLIDE DE NAVEGAÇÕES // escolher o slide a ser visto-->
<!-- SLIDE DE NAVEGAÇÃO 1-->
<a href=" http://dicaslegais.weebly.com/windows-xp-rapido.html "><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src=" http://farm6.static.flickr.com/5148/5630835385_6c61a8c3a2.jpg " class="transp" id="tvn1" /></a>
<!-- SLIDE DE NAVEGAÇÃO 2-->
<a href=" http://dicaslegais.weebly.com/aulas-sobre-virus.html "><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src=" http://farm6.static.flickr.com/5224/5630835539_d4b4f367e1_m.jpg " class="opac" id="tvn2" /></a>
<!-- SLIDE DE NAVEGAÇÃO 3-->
<a href=" http://dicaslegais.weebly.com/ubunto--seven.html "><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src=" http://farm6.static.flickr.com/5308/5631417988_1c615eb009.jpg " class="transp" id="tvn3" /></a>
<!-- SLIDE DE NAVEGAÇÃO 4-->
<a href=" http://dicaslegais.weebly.com/resetar-a-bios.html "><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src=" http://farm6.static.flickr.com/5144/5630835595_b611e66cdd.jpg " class="transp" id="tvn4" /></a>
<!-- SLIDE DE NAVEGAÇÃO 5-->
<a href=" http://dicaslegais.weebly.com/faikes.html "><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" src=" http://farm6.static.flickr.com/5261/5631418042_75f47816a4.jpg " class="transp" id="tvn5" /></a>
</div>
<ul id="hid">
<!-- SLIDES-->
<!-- SLIDE 1-->
<li id="tv1">
<a href="windows-xp-rapido.html "><img height="177" width="354" src=" http://farm6.static.flickr.com/5148/5630835385_6c61a8c3a2.jpg " title="XP Turbo " />
Xp-Turbo
<br /><span>
Arquivo contendo ajuste automaticos para deixar seu windows xp mais rapido com apenas um clique.
</span></a></li>
<!-- SLIDE 2-->
<li id="tv2">
<a href="aulas-sobre-virus.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5224/5630835539_d4b4f367e1_m.jpg " title=" Video aula sobre virus" />
Video aula sobre virus
<br /><span>
Aprenda oque Fazem e como funionan os virus.
</span></a></li>
<!-- SLIDE 3-->
<li id="tv3">
<a href="http://dicaslegais.weebly.com/ubunto--seven.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5308/5631417988_1c615eb009.jpg" title="Transforme o Ubunto em Seven " />
Ubunto em Seven
<br /><span>
Deixe seu linux Ubunto com a aparencia do Windos Seven
</span></a></li>
<!-- SLIDE 4-->
<li id="tv4">
<a href="http://dicaslegais.weebly.com/resetar-a-bios.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5144/5630835595_b611e66cdd.jpg" title="3 Metodos de Resetar a Bios
" />
3 Metodos de Resetar a Bios
<br /><span>
Apenda 3 maneiras de Resetar a Bios
</span></a></li>
<!-- SLIDE 5-->
<li id="tv5">
<a href="faikes.html"><img height="177" width="354" src=" http://farm6.static.flickr.com/5261/5631418042_75f47816a4.jpg " title=" Cuidado Com os Fakes
" />
Cuidado Com os Fakes
<br /><span>
Veja os programas que os hacker usam para enganar as pessoas.
</span>
</a></li>
</ul>
<script type="text/javascript">
channel(1);
</script>
</div>
#tv a {
font-size:16px;
font-weight:bold;
}
#tv span {
color:#434343;
font-size:12px;
font-weight:normal;
}
#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}
#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}
#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}
#tv .opac {
margin-bottom:5px;
opacity:1;
}
#tv .transp {
margin-bottom:5px;
opacity:0.1;
}
#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}
#tv {
background:url("http://img31.imageshack.us/img31/2656/tvbg.png") no-repeat scroll 0 0 transparent;
float:left;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;
width:344px;
}
#corpoh {
text-align:left;
}
</style>
<div id="tv">
<script type='text/javascript'>
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);
// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);
//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;
</script>
<div id="tvshow">
<!-- SLIDE INICIAL-->
<a href="http://www.baixaki.com.br/download/google-chrome-6-0-beta.htm"><img height="177" width="354" src="http://www.baixaki.com.br/imagens/65395/106595.jpg" title="Google Chrome 6 Beta" />
Google Chrome 6 Beta
<br /><span>
As atualizações para o navegador do Google não param! Experimente a nova versão de testes liberada.
</span></a></div>
<div id="nav">
<!-- SLIDE DE NAVEGAÇÕES // escolher o slide a ser visto-->
<!-- SLIDE DE NAVEGAÇÃO 1-->
<a href=" http://dicaslegais.weebly.com/windows-xp-rapido.html "><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src=" http://farm6.static.flickr.com/5148/5630835385_6c61a8c3a2.jpg " class="transp" id="tvn1" /></a>
<!-- SLIDE DE NAVEGAÇÃO 2-->
<a href=" http://dicaslegais.weebly.com/aulas-sobre-virus.html "><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src=" http://farm6.static.flickr.com/5224/5630835539_d4b4f367e1_m.jpg " class="opac" id="tvn2" /></a>
<!-- SLIDE DE NAVEGAÇÃO 3-->
<a href=" http://dicaslegais.weebly.com/ubunto--seven.html "><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src=" http://farm6.static.flickr.com/5308/5631417988_1c615eb009.jpg " class="transp" id="tvn3" /></a>
<!-- SLIDE DE NAVEGAÇÃO 4-->
<a href=" http://dicaslegais.weebly.com/resetar-a-bios.html "><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src=" http://farm6.static.flickr.com/5144/5630835595_b611e66cdd.jpg " class="transp" id="tvn4" /></a>
<!-- SLIDE DE NAVEGAÇÃO 5-->
<a href=" http://dicaslegais.weebly.com/faikes.html "><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" src=" http://farm6.static.flickr.com/5261/5631418042_75f47816a4.jpg " class="transp" id="tvn5" /></a>
</div>
<ul id="hid">
<!-- SLIDES-->
<!-- SLIDE 1-->
<li id="tv1">
<a href="windows-xp-rapido.html "><img height="177" width="354" src=" http://farm6.static.flickr.com/5148/5630835385_6c61a8c3a2.jpg " title="XP Turbo " />
Xp-Turbo
<br /><span>
Arquivo contendo ajuste automaticos para deixar seu windows xp mais rapido com apenas um clique.
</span></a></li>
<!-- SLIDE 2-->
<li id="tv2">
<a href="aulas-sobre-virus.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5224/5630835539_d4b4f367e1_m.jpg " title=" Video aula sobre virus" />
Video aula sobre virus
<br /><span>
Aprenda oque Fazem e como funionan os virus.
</span></a></li>
<!-- SLIDE 3-->
<li id="tv3">
<a href="http://dicaslegais.weebly.com/ubunto--seven.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5308/5631417988_1c615eb009.jpg" title="Transforme o Ubunto em Seven " />
Ubunto em Seven
<br /><span>
Deixe seu linux Ubunto com a aparencia do Windos Seven
</span></a></li>
<!-- SLIDE 4-->
<li id="tv4">
<a href="http://dicaslegais.weebly.com/resetar-a-bios.html"><img height="177" width="354" src="http://farm6.static.flickr.com/5144/5630835595_b611e66cdd.jpg" title="3 Metodos de Resetar a Bios
" />
3 Metodos de Resetar a Bios
<br /><span>
Apenda 3 maneiras de Resetar a Bios
</span></a></li>
<!-- SLIDE 5-->
<li id="tv5">
<a href="faikes.html"><img height="177" width="354" src=" http://farm6.static.flickr.com/5261/5631418042_75f47816a4.jpg " title=" Cuidado Com os Fakes
" />
Cuidado Com os Fakes
<br /><span>
Veja os programas que os hacker usam para enganar as pessoas.
</span>
</a></li>
</ul>
<script type="text/javascript">
channel(1);
</script>
</div>