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

Problemas com um slide show


douglasdamame

Pergunta

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

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.



  • Estatísticas dos Fóruns

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