Problemas com um slide show

douglasdamame · Janeiro 17, 2008

Olá pessoal,

Estou tentando fazer um slide show em ASP, mas estou tendo problemas na parte CSS. Abaixo coloco o código:

<%
conexão banco de dados
%>

<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: 200px;
				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;
			}
			div#slideshow #slides .hidden {
				display: none;
			}
			div#slideshow #slides div span {
				display: block;
			}
			div#slideshow #slides .titulo{
				font-weight: bold;
				font-size: 16px;
				padding: 5px 0 0 5px;
			}
			div#slideshow #slides .conteudo {
				padding: 0 0 0 5px;
			}
--></style>


		<script type="text/javascript">
			var tempo;
			var intervalo = 2000; //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=&...st&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/unobtr...t/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], 'click', 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);
			}
			addEvent(window, 'load', init);
		</script>



	</head>
	<body>
	
<div id="slideshow" name="slideshow">
			
			
			<div id="links" name="links">
				<ul>
				<%
				Dim contadorb
				contadorb = 1
				Set rsb = Conn.Execute("SELECT top 4 * FROM noticias order by data")
				If not rsb.EOF Then
				Do until rsb.eof
				%>

				<li id="link<%=contadorb%>" name="link<%=contadorb%>" class="ativo"><a href="#"><%=contadorb%></a></li>

				<%
				rsb.MoveNext
				contadorb = contadorb + 1
				Loop
				Else
				Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
				End if
				%>
				</ul>

			</div>


		<div id="slides" name="slides">


			<%
			Dim contador
			contador = 1
			Set rs = Conn.Execute("SELECT top 4 * FROM noticias order by data")
			If not rs.EOF Then
			Do until rs.eof
			%>

				<div id="slide<%=contador%>" name="slide<%=contador%>" class="visible">
				<img src="noticias/<%=rs("foto")%>" width="250px" height="160px" style="float:left; margin: 0px; margin-right: 1px;" /> 
				<%=Rs("titulo")%> <br />
				<%=Rs("data")%> <br />
				</div>
			<%
			rs.MoveNext
			contador = contador + 1
			Loop
			Else
			Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
			End if
			%>

		</div>
		
		
		

</div>

</body>
</html>

Neste código o sistema mostra 4 notícias

Vou descrever os problemas:

Ao abrir a página ela mostra todas as 4 notícias uma abaixo da outra. Após o primeiro ciclo de slides ele vai apagando até que fique normal.

O problema seria nesta linha:

<div id="slide<%=contador%>" name="slide<%=contador%>" class="visible">

Porque esta como class="visible", mas se eu colocar hidden não aparece nada.

Existe alguma forma de resolver isso???

Por favor pessoal estou a semanas quebrando a cabeça nisso...

Obrigado

Douglas

Obs.:

A parte em ASP esta OK

Estou querendo também colocar Fade nas transações das imagens, mas acho que isso é com o pessoal do JS, né!?

programador php · Janeiro 17, 2008

quando você coloca como hidden

você esta querendo esconder...

por isso que não exibe!!!

quanto ao fade, você pode criar uma função JS que vai definindo a opacity:; do CSS

não sei se respondi, se tiver um link ajuda muito

abraço

douglasdamame · Janeiro 19, 2008

Programador, obrigado pela atenção.

Sobre o problema do código hidden e visible eu consegui resolver, O problema esta no Código ASP.

Abaixo, aproveito para deixar a todos do código do SlideShoe do tmFerreira funcionando em ASP perfeitamente.

Agora meu problema é em relação ao Fade. Na verdade eu não sei onde devo inserir estes códigos para tansação da foto. Se puder me ajudar agradeceria muito.

O Código:

<%
dim dsn
dim Conn
dsn="DBQ=" & Server.Mappath("dados/banco.mdb") & ";Driver={Microsoft Access Driver (*.mdb)};"
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open dsn
Set rs = Server.CreateObject("ADODB.Recordset")
RS.ActiveConnection = Conn
%>

<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: 200px;
				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;
				
		}
	   div#slideshow #slides .hidden {
		display: none;
			}
			div#slideshow #slides div span {
				display: block;
			}
			div#slideshow #slides .titulo{
				font-weight: bold;
				font-size: 16px;
				padding: 5px 0 0 5px;
			}
			div#slideshow #slides .conteudo {
				padding: 0 0 0 5px;
			}
		--></style>
		<script type="text/javascript">
			var tempo;
			var intervalo = 2000; //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=&...st&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/unobtr...t/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], 'click', 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);
			}
			addEvent(window, 'load', init);
		</script>

	</head>
	<body>
	
<div id="slideshow">
			
			
			<div id="links">
				<ul>
				<%
				Dim contadorb
				contadorb = 1
				class2="ativo"
				Set rsb = Conn.Execute("SELECT top 4 * FROM TABELA order by data")
				If not rsb.EOF Then
				Do until rsb.eof 
				%>

				<li id="link<%=contadorb%>"class="<%=class2%>"><a href="#"><%=contadorb%></a></li>

				<%
				rsb.MoveNext
				contadorb = contadorb + 1
				class2="inativo"
				Loop
				Else
				Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
				End if
				%>
				</ul>

			</div>


		<div id="slides">


			<%
			Dim contador
			contador = 1
			class1="visible"
			Set rs = Conn.Execute("SELECT top 4 * FROM TABELA order by data")
			If not rs.EOF Then
			Do until rs.eof 
			%>

				<div id="slide<%=contador%>" class="<%=class1%>">
				<img src="noticias_inicial/<%=rs("foto")%>" style="float:left; margin: 0px; margin-right: 1px;" /> 
				<%=Rs("titulo")%> <br />
				<%=Rs("data")%> <br />
		  </div>
			<%
			rs.MoveNext
			contador = contador + 1
			class1="hidden"
			Loop
			Else
			Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
			End if
			%>

		</div>
		
		
		

</div>

</body>
</html>

Para ver o slide funcionando: http://www.rugbymagazine.com.br/slide25.asp

Fico no aguardo de uma ajuda sobre o Fade!!

Obrigado,

Douglas

Entrar

Arquivado

Problemas com um slide show

Recommended Posts

douglasdamame 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglasdamame 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante