Slide de notícias (adaptado) do S l i d e S h o w - by tmferreira

Edye_TM · Abril 6, 2009

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
			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
				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>

Anderson Narciso · Dezembro 12, 2009

Bacana brother :]

bcdds · Janeiro 5, 2010

Show de Bola...

e-feitos comunicação · Janeiro 10, 2010

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>

ENTREM NESTE LINK E VEJA O SLIDE FUNCIONANDO

http://www.noticialivre.com.br/slide_noticia_principal.asp

PauloO HenriqueE · Janeiro 13, 2010

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

Genarks Oliveira · Abril 3, 2010

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;                        
}                        
div#slideshow {
	height: 200px;
	width: 460px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;
                      
}                        
div#slideshow #links {                                
float: right;                                
clear: both;                                
width: 6%;                                
text-align: center;                        
}                        
div#slideshow #links li {                                
font-size: 11px;                                
border-top: 1px solid white;                                
line-height: 39px;                        
}                        
div#slideshow #links li.inativo {                                
background: #EEEEEE;                        
}                        
div#slideshow #links li.ativo {                                
background: #CC0000;                        
}                        
div#slideshow #slides {
	background: #BBBBBB;
	height: 100%;
	color: white;
	font-size: 11px;
	font-weight: bold;
	vertical-align: middle;
}                        
div#slideshow #slides .visible {                                
display: block;                        
}                        
div#slideshow #slides .hidden {                                
display: none;                        
}                        
div#slideshow #slides div span {                                
display: block;                        
}                        
div#slideshow #slides .titulo{                                
font-weight: bold;                                
font-size: 8px;                                
padding: 5px 0 0 5px;
vertical-align: middle;                        
}                        
div#slideshow #slides .conteudo {                                
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                        
		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                                
				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>

veja funcionando aqui!

Obrigado pela atenção

Apenas Eu · Novembro 6, 2011

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?

Entrar

Arquivado

Slide de notícias (adaptado) do S l i d e S h o w - by tmferreira

Recommended Posts

Edye_TM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

bcdds 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

e-feitos comunicação 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloO HenriqueE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Genarks Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante