Ir para conteúdo
Fórum Script Brasil

Felipe Nogueira

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    1

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por Felipe Nogueira

  1. Jcycle não roda na web

    em Ajax, JavaScript, XML, DOM

    Postado

    Estou fazendo uma página web: www.atlanticaautoescola.com.br e peguei na internet um script para fazer os banners, configurei o script de acordo com o que eu queria e ele rodou no local sem problemas, acontece que

    quando eu subo ele na web ele não funciona, não sei se pode ser problema com o host que no momento é free, o 000webhost(para teste) ou se tenho que adicionar algo no script para rodar no host.

    Código HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Carregue a biblioteca jquery antes do plugin jcycle -->
&lt;script type="text/javascript" src="scripts/jquery.js"></script>
&lt;script type="text/javascript" src="scripts/jcycle.js"></script>
&lt;script type="text/javascript" src="scripts/fotos.js"></script>

<link href="estilobanner.css" rel="stylesheet" type="text/css" />

<body>
<div id="geral">
  <div id="fotos">
  <div class="paginas"></div>

        <ul>
            <li><span class="barra_semi-transparente"><img src="img/teste_cnh.jpg" alt="" /></span>
              <div class="barra_semi-transparente"></div>
                <p><a href="promocao.html" title="foto 01">Clique aqui para obter mais informações</a></p>            
          </li>
            
            <li>
                <img src="img/teste_categoria.jpg" alt="" />
                <div class="barra_semi-transparente"></div>
                <p><a href="http://espn.estadao.com.br/gleidsonvenga/post/186260_ANDERSON+SILVA+VS+YUSHIN+OKAMI+CONFIRMADO+NO+UFC+RIO" title="foto 02">Clique aqui para obter mais informações</a></p>            
          </li>
            
            <li>
            <img src="img/teste_medo.jpg" alt="" />
                <div class="barra_semi-transparente"></div>
                <p><a href="http://www.espbr.com/noticias/libertadores-neymar-carregou-santos" title="foto 03">Clique aqui para obter mais informações</a></p>            
          </li> 

             <li>
                <img src="img/add_categoria.jpg" alt="" />
                <div class="barra_semi-transparente"></div>
                <p><a href="http://www.omelete.com.br/cinema/megan-fox-fora-de-transformers-3/" title="foto 03">Clique aqui para obter mais informações</a></p>            
            </li> 
</ul>
    Função: 
    (function($){    
    $(document).ready(function() {
        // Cria uma div.paginas que receberá os paginadores
        var div = $('<div></div>').addClass('paginas');
        // Insere a div criada antes da lista de fotos
        $('#fotos ul').before(div);        
        // roda o jcycle na ul dentro da div fotos
        $('#fotos ul').cycle({
            pager: 'div.paginas', // paginação
            pause: true, // pausa ao deixar o mouse sobre a imagens
            pauseOnPagerHover: true, // pausa ao deixar o mouse sobre a paginação
            fx:     'fade',
            speed:  2000,
            timeout: 5000,             
            // Executa uma função antes de cada troca de slide
            before: function(atual, proximo, opcoes, avancando) {
                 // Esconde o parágrafo e a div.barra_semi-transparente que estão no slide atual
                $('p, div.barra_semi-transparente', atual).slideUp('fast');
            },            
            // Executa uma função depois de cada troca de slide
            after: function(atual, proximo, opcoes, avancando) {
            
                // mostra o parágrafo e a div.barra_semi-transparente do slide atual
                $('p, div.barra_semi-transparente', proximo).slideDown('fast');
            }
        });        
    });    
})(jQuery);
    CSS: 
    *{margin:0;
  padding:0}

body {background:;padding: 0;font: 14px normal Verdana, Arial, Helvetica, sans-serif;
     color: #069;margin:0px 0 0 0;text-align:center;}

#geral {width: 500px; margin: 0 auto;padding:0 0 0px 0;} /*background:#B3FFFF; PARA SE LOCALIZAR*/
h1 {font-size: 2em; text-align:center;}
/********************
--==[[FOTOS]]==--
********************/
#fotos{position: relative; width:500px; height:263px; padding:0; margin:0px 0px 0px 0px; float:left;}
#fotos ul li{list-style: none;}
#fotos ul li img {
    margin: 0px;
    padding: 0px;
    width: 520px;
    height: 240px; */
}
#fotos ul li {position: relative;}
#fotos ul li p {margin: 0px; padding: 10px 15px; position: absolute; bottom: 0px; left: 50px; line-height: 20px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 18px; font-weight:bold; display: none;}
#fotos ul li p a {color: black; text-decoration: none;}

/********************
--==[[PAGINAÇAO]]==--
********************/
#fotos div.paginas {position: absolute; top: 0px; right: 0px; z-index: 100;}
#fotos div.paginas a {height: 20px; width: 20px; display: block; float: left; margin-left: 2px; color: white; font-size: 12px;    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none; text-align: center; line-height: 20px; outline: none; background:#dfe0ee; opacity:0.9; filter: alpha(opacity = 90); font-weight:bold;}
#fotos div.paginas a:hover, #fotos div.paginas a.activeSlide {background: #000000; font-weight: bold;}
#fotos ul li div.barra_semi-transparente {width: 520px; height: 40px; position: absolute; bottom: 0px; left: 0px; background:#dfe0ee; opacity:100; filter:                 alpha(opacity = 80); display: none;}
a img {border: none;}

    Alguém pode me ajudar?

×
×
  • Criar Novo...