douglasdamame Postado Janeiro 17, 2008 Denunciar Share Postado Janeiro 17, 2008 (editado) 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íciasVou 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...ObrigadoDouglasObs.: A parte em ASP esta OKEstou querendo também colocar Fade nas transações das imagens, mas acho que isso é com o pessoal do JS, né!? Editado Janeiro 17, 2008 por douglasdamame Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Geleiaskt Postado Janeiro 18, 2008 Denunciar Share Postado Janeiro 18, 2008 E aí cara, beleza?Troca este trecho do código:div#slideshow #slides .visible {display: block;}div#slideshow #slides .hidden {display: none;}Por este:div.visible {display: block;}div.hidden {display: none;visibility:hidden;}Vê se resolveu seu problema. Abraço! ^^ Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 douglasdamame Postado Janeiro 19, 2008 Autor Denunciar Share Postado Janeiro 19, 2008 Geleiaskt obrigado pela ajuda.O problema real esta no código ASP.Abaixo deixo para todos o código do SlideShow - tmFerreira funcionando perfeitamente em ASP<% 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
douglasdamame
Olá pessoal,
Estou tentando fazer um slide show em ASP, mas estou tendo problemas na parte CSS. Abaixo coloco o código:
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é!?
Editado por douglasdamameLink para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.