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 -->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jcycle.js"></script>
<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?
