Ir para conteúdo
Fórum Script Brasil
  • 0

Problemas com um slide show

douglasdamame

Perguntado por douglasdamame,

 Share

Pergunta

douglasdamame

douglasdamame

Postado
Postado (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í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 douglasdamame
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0
douglasdamame

douglasdamame

Postado
  • Autor
Postado

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>

Link para o comentário
Compartilhar em outros sites

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...