Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal eu achei um slide de notícias feito totalmente em css e javascript desenvolvido por tm ferreira e fiz algumas adaptações.
http://forum.imasters.com.br/index.php?showtopic=212347
foi adicionado fadein e fadeout durante as transições.. foi adicionado também um link para a notícia que estiver aparecendo e navegação com setas para a esquerda e para a direita..
o código foi testado somente no IE7 e provavelmente terá problemas ao usar em outros browsers ou IE6-. quem se dispor a adaptar o código para funcionar em outras versões e outros navegadores, com certeza será de grande ultilidade para todos.
não coloquei limitador de texto ainda.. as fotos tem tamanho fixo...
veja funcionando aqui http://www.banzae.com/
segue o código galera
<html>
<head>
<title>S l i d e S h o w - by tmferreira</title>
<style>
<!--
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
div#slideshow {
height: 250px;
width: 500px;
border: 1px solid black;
}
div#slideshow #links {
float: right;
clear: both;
width: 10%;
text-align: center;
}
div#slideshow #links li {
font-size: 12px;
border-top: 1px solid white;
line-height: 49px;
}
div#slideshow #links li.inativo {
background: #EEEEEE;
}
div#slideshow #links li.ativo {
background: #D9D9D9;
}
div#slideshow #slides {
background: #BBBBBB;
height: 100%;
color: white;
font-size: 14px;
}
div#slideshow #slides .visible {
display: block;
background-color: #BBBBBB;
width:100%;
height:100%;
}
div#slideshow #slides .hidden {
display: none;
}
div#slideshow #slides div span {
display: block;
}
div#slideshow #slides .titulo{
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
text-align:center;
padding: 5px;
}
div#slideshow #slides .imagem{
width:200px;
height:170px;
}
div#slideshow #slides .conteudo {
font-size: 13px;
color: #FFFFFF;
padding: 10px;
width:100%;
}
div#slideshow #slides .link {
font-size: 13px;
color: #FFFFFF;
padding: 5px;
}
div#slides #fade{
position: relative;
}
div#fade {
width:444px;
height:220px;
background-color: #BBBBBB;
position: absolute;
margin-left:0;
margin-top:-250px;
}
div#slides #left{
position: relative;
}
div#slides #right{
position: relative;
}
div#left {
width:222px;
height:220px;
position: absolute;
margin-left:0;
margin-top:-250px;
background:url(esq.png) no-repeat center left;
}
div#right {
width:222px;
height:220px;
position: absolute;
margin-left:222px;
margin-top:-250px;
background:url(dir.png) no-repeat center right;
}
div .link a {
color:#FFFFFF;
}
div .link label a {
color:#FFFFFF;
font-weight:bold;
}
div .link a:hover {
color:#FFFFFF;
text-decoration:underline;
}
-->
</style>
<script type="text/javascript">
<!--
var transitionTime = 5000; //tempo entre transições em milisegundos
var fadeTimeSlide = 700; //tempo de fade do slide em milisegundos
var fadeTimeClick = 300; //tempo de fade quando for clicado nos números em milisegundos
var fadeTimeScroll = 700; //lempo de fade quando for clicado nas setas em milisegundos
function fade(eid,op,tp) {
TimeToFade = fadeTimeSlide;
if(op == 1) {
TimeToFade = fadeTimeClick;
}
if(op == 2) {
TimeToFade = fadeTimeSlide;
}
if(op == 3) {
TimeToFade = fadeTimeScroll;
}
var element = document.getElementById(eid);
if(element == null) {
return;
}
if(element.FadeState == null) {
if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') {
element.FadeState = 2;
}else{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1) {
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}else {
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks) {
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1) {
newOpVal = 1 - newOpVal;
}
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
var tempo;
var intervalo = transitionTime;
function $(campo) {
return document.getElementById(campo);
}
//Trecho de código criado por Wilker, pego em [http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522](http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522)
var $A = Array.from = function(iterable) {
if (!iterable) return [];
if (iterable.toArray) {
return iterable.toArray();
} else {
var results = [];
for (var i = 0; i < iterable.length; i++)
results.push(iterable[i]);
return results;
}
};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
};
};
//Fim do trecho de código criado por Wilker
function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em [http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html](http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html)
if (typeof obj == "string") {
if (null == (obj = document.getElementById(obj))) {
throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
}
}
if (obj.attachEvent) {
return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
} else {
throw new Error("Seu browser não suporta adição de eventos.");
}
}
function rollerSlide(d) {
fade('fade',3);
window.setTimeout(function() {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
if (divs[i].className == 'visible') {
divs[i].className = 'hidden';
$('link' + (i + 1)).className = 'inativo';
if(d == 1) {
i = (i == divs.length - 1) ? 0 : i + 1;
}else {
i = (i == divs.length - 5) ? 4 : i - 1;
}
divs[i].className = 'visible';
$('link' + (i + 1)).className = 'ativo';
fade('fade',3);
clearInterval(tempo);
break;
}
}
}, fadeTimeScroll);
}
function nextSlide() {
fade('fade',2);
window.setTimeout(function() {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
if (divs[i].className == 'visible') {
divs[i].className = 'hidden';
$('link' + (i + 1)).className = 'inativo';
i = (i == divs.length - 1) ? 0 : i + 1;
divs[i].className = 'visible';
$('link' + (i + 1)).className = 'ativo';
fade('fade',2);
break;
}
}
}, fadeTimeSlide);
}
function init() {
var as = $('links').getElementsByTagName('b');
var i;
for (i = 0; i < as.length; i++) {
var f = function(v) {
setSlide(as[v]);
}
addEvent(as[i], 'click', f.bind(this, i));
}
tempo = setInterval('nextSlide()', intervalo);
}
function setSlide(link) {
fade('fade',1);
window.setTimeout(function() {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
divs[i].className = 'hidden';
}
var lis = $('links').getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
lis[i].className = 'inativo';
}
link.parentNode.className = 'ativo';
i = parseInt(link.firstChild.data);
$('slide' + i).className = 'visible';
fade('fade',1);
clearInterval(tempo);
}, fadeTimeClick);
}
addEvent(window, 'load', init);
-->
</script>
</head>
<body onload="fade('fade');fade('left');fade('right');">
<div id="slideshow" name="slideshow">
<div id="links" name="links">
<ul>
<li id="link1" name="link1" class="ativo"><b style="width:100%;height:100%;cursor:pointer;">1</b></li>
<li id="link2" name="link2" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">2</b></li>
<li id="link3" name="link3" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">3</b></li>
<li id="link4" name="link4" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">4</b></li>
<li id="link5" name="link5" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">5</b></li>
</ul>
</div>
<div id="slides" name="slides">
<div id="slide1" name="slide1" class="visible">
<span class="titulo">
Título 1
</span>
<span class="conteudo">
<img src="logo1.jpg" align="left" class="imagem">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
<span class="link">
<a href="link_1">Leia mais</a> sobre <label><a href="link_5">Título 1</a><label>
</span>
</div>
<div id="slide2" name="slide2" class="hidden">
<span class="titulo">
Título 2
</span>
<span class="conteudo">
<img src="logo2.jpg" align="left" class="imagem">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.he 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</span>
<span class="link">
<a href="link_2">Leia mais</a> sobre <label><a href="link_5">Título 2</a><label>
</span>
</div>
<div id="slide3" name="slide3" class="hidden">
<span class="titulo">
Título 3
</span>
<span class="conteudo">
<img src="logo3.jpg" align="left" class="imagem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</span>
<span class="link">
<a href="link_3">Leia mais</a> sobre <label><a href="link_5">Título 3</a><label>
</span>
</div>
<div id="slide4" name="slide4" class="hidden">
<span class="titulo">
Ataque terrorista aos Estados.
</span>
<span class="conteudo">
<img src="logo4.jpg" align="left" class="imagem">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</span>
<span class="link">
<a href="link_4">Leia mais</a> sobre <label><a href="link_5">Ataque terrorista aos Estados.</a><label>
</span>
</div>
<div id="slide5" name="slide5" class="hidden">
<span class="titulo">
Título 5
</span>
<span class="conteudo">
<img src="logo5.jpg" align="left" class="imagem">
Contrary to popular belief, Lorem Ipsum is not simply random text.
</span>
<span class="link">
<a href="link_5">Leia mais</a> sobre <label><a href="link_5">Título 5</a><label>
</span>
</div>
</div>
<div id="fade"></div>
<div id="left" onMouseOver="fade('left');" onMouseOut="fade('left');" onClick="rollerSlide(0)"></div>
<div id="right" onMouseOver="fade('right');" onMouseOut="fade('right');" onClick="rollerSlide(1)"></div>
</div>
</body>
</html>Show de Bola...
Muito bom este script, fiz algumas modificações, apenas a inclusão e dados de um bd mysql, só que dentro da div
os links não estão funcionando, alguem poderia me ajudar...
Segue as modificações?
<div id="slideshow" name="slideshow">
<div id="links" name="links">
<ul>
<%
dim rec_link, cont_foto, rec2, clink
cont_foto=0
clink=1
set con = server.createobject("ADODB.CONNECTION")
con.open "Driver=MySQL ODBC 3.51 Driver; Server=localhost; Database=hostcerto_nl; Uid=nl; Pwd=mika-2210;"
set rec_link=server.createobject("ADODB.RECORDSET")
rec_link.open "noticia_principal order by Cod_noticia_principal DESC",con
do while not rec_link.eof
if cont_foto<5 and rec_link.fields("disposicao")=1 then
if clink=1 then
%>
<li id="link1" name="link1" class="ativo"><b style="width:100%;height:100%;cursor:pointer;"><%=clink%></b></li>
<%else%>
<li id="link<%=clink%>" name="link<%=clink%>" class="inativo"><b style="width:100%;height:100%;cursor:pointer;"><%=clink%></b></li>
<%end if
clink=clink+1
end if
cont_foto=cont_foto+1
rec_link.movenext
loop
rec_link.close
%>
</ul>
</div>
[--------------------- este bloco acima esta funcionado muito bem -------]
<div id="slides" name="slides"><% dim cont, tabela, cont_click
cont=0
cont_click=1
set rec=server.createobject("ADODB.RECORDSET")
rec.open "noticia_principal order by Cod_noticia_principal DESC",con
do while not rec.eof
if rec.fields("disposicao")=1 and cont < 5 then
if cont_click=1 then
tipo="visible"
else
tipo="hidden"
end if %>
<div id="slide<%=cont_click%>" name="slide<%=cont_click%>" class="<%response.write tipo%>">
<span class="conteudo">
<img src="<%=rec.fields("imagem")%>" align="left" class="imagem"></a>
</span>
<span class="titulo">
<%=rec.fields("nome")%>
</span>
<span class="link">
[ este link não fica ativado (não funciona), se coloca-lo fora da div ele funciona...]
<a href="descricao_1.asp?link=<%=rec.fields("cod_noticia_principal")%>">Veja Mais</a>
</span>
</div>
<%
cont_click=cont_click+1
end if
cont=cont+1
rec.movenext
loop
rec.close
%>
</div>
<div id="fade"></div>
<div id="left" onmouseover="fade('left');" onmouseout="fade('left');" onclick="rollerSlide(0)"></div>
<div id="right" onmouseover="fade('right');" onmouseout="fade('right');" onclick="rollerSlide(1)"></div>
</div>
</body>
</html>Obrigado Cara tava ha um tempo procurando um sistema desse tipo muito facil e complexo ao mesmo tempo
Parabens por você ser um pessoa bondosa o suficiente por passar a diante esse codigo
Parabens
beleza... slideshow bacana... eu tenho a versao sem o fadein fadeout alguem pode me ajudar a colocar?
<html>
<head>
<title></title>
<style><!--margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
} height: 200px;
width: 460px;
margin: 0px;
padding: 0px;
border: 1px solid #CCCCCC;
}float: right;
clear: both;
width: 6%;
text-align: center;
}font-size: 11px;
border-top: 1px solid white;
line-height: 39px;
}background: #EEEEEE;
}background: #CC0000;
} background: #BBBBBB;
height: 100%;
color: white;
font-size: 11px;
font-weight: bold;
vertical-align: middle;
}display: block;
}display: none;
}display: block;
}font-weight: bold;
font-size: 8px;
padding: 5px 0 0 5px;
vertical-align: middle;
}padding: 5px 0 0 5px;
vertical-align: middle;
}
--></style>
<script type="text/javascript">
var tempo;
var intervalo = 5000; //Intervalo entra as mudanças de slides. Definido em milisegundos.
function $(campo) {
return document.getElementById(campo);
}
//Trecho de código criado por Wilker, pego em [http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522](http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522)
var $A = Array.from = function(iterable) {
if (!iterable) return [];
if (iterable.toArray) {
return iterable.toArray();
} else {
var results = [];
for (var i = 0; i < iterable.length; i++)
results.push(iterable[i]);
return results;
}
};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
};
};
//Fim do trecho de código criado por Wilker
function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em [http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html](http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html)
if (typeof obj == "string") {
if (null == (obj = document.getElementById(obj))) {
throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
}
}
if (obj.attachEvent) {
return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
} else {
throw new Error("Seu browser não suporta adição de eventos.");
}
}
function nextSlide() {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
if (divs[i].className == 'visible') {
divs[i].className = 'hidden';
$('link' + (i + 1)).className = 'inativo'
i = (i == divs.length - 1) ? 0 : i + 1;
divs[i].className = 'visible';
$('link' + (i + 1)).className = 'ativo'
break;
}
}
}
function init() {
var as = $('links').getElementsByTagName('a');
var i;
for (i = 0; i < as.length; i++) {
var f = function(v) {
setSlide(as[v]);
}
addEvent(as[i], 'onmouseout', f.bind(this, i));
}
tempo = setInterval('nextSlide()', intervalo);
}
function setSlide(link) {
var divs = $('slides').getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
divs[i].className = 'hidden';
}
var lis = $('links').getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
lis[i].className = 'inativo';
}
link.parentNode.className = 'ativo';
i = parseInt(link.firstChild.data);
$('slide' + i).className = 'visible';
clearInterval(tempo);
}
//intervalo = 20000;
//tempo = setInterval('nextSlide()', intervalo);
addEvent(window, 'load', init);
</script>
</head>
<body>
<div id="slideshow" name="slideshow">
<div id="links" name="links">
<ul><?php
$sql = mysql_query("SELECT * FROM destaque where categoria='fotodia' AND id_franquia='$cidade' order by id desc LIMIT 5");
$sql2 = mysql_query("SELECT * FROM destaque where categoria='fotodia' AND id_franquia='$cidade' order by id desc LIMIT 5");
$i=1;
$class="ativo";
while($mostrar = mysql_fetch_assoc($sql)) {
echo "<li id=link$i name=link$i class=$class><a href=#>$i</a></li>";
?>
<? $i++; $class="inativo";} ?>
</ul>
</div>
<div id="slides" name="slides">
<?php
$sql2 = mysql_query("SELECT * FROM destaque where categoria='fotodia' AND id_franquia='$cidade' order by id desc LIMIT 5");
$class="visible";
$j=1;
while($dados2=mysql_fetch_array($sql2)) {
echo "<div id=slide$j name=slide$j class=$class>";
?>
<?
echo "<a href='?pg=noticia&id=$dados2[id_galeria]'>
<img vspace='2' src='thumbs.php?w=427&h=170&imagem=images/destaques/$dados2[foto]' border='0'>";
echo "<br>$dados2[texto]</a></div>";
?>
<? $j++; $class="hidden"; } ?>
</div>
</div>
</body>
</html>Obrigado pela atenção
Ola...eu não entendo nada de javascript....mas é assim...um colega meu me indicou esse slide...e como ja informaram acima, os links num funcionam....
Então, eu tentei juntar algumas coisas das sugestões acima, no código, ou trocar o que está lá, pelo que está aki, mas eu não consigo.... Ou num funciona ou se usa eles da thiuthi....
Tem como alguem me explicar de maneira bem facinha, como fazer pros links funcionarem?
Bacana brother :]