Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Pimmel

Erro jQuery

Por , em Javascript

Recommended Posts

Pimmel    0

Pimmel
Postado

Olá

 

Comecei a estudar web design e estou fazendo um banners. Eles funcionaram corretamente individualmente mas quando tento colocar todos juntos dá erro. Abaixo o código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/jcycle.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery.jcarousellite.js"></script>
<script type="text/javascript">
var $jQuery = jQuery.noConflict()
</script>
});
$jQuery(function(){
$jQuery('#bannerpromocional ul').cycle({
fx: 'fade',
speed: 2000,
timeout: 5000,
next: '#prox',
prev: '#ant',
pager:'#pager'
})
})
</script>
<script type="text/javascript">
$jQuery(function(){
$jQuery(".carosel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 4,
auto: 3000,
speed: 1000,
})
})
</script>
<script type="text/javascript">
$jQuery(function(){
$jQuery('#s6').cycle({
fx:'scrollUp',
timeout: 6000,
atraso: - 2000,
});
})
</script>
</head>
<body>
<div id="site">
<div id="pagina">
<div id="topo">
</div> <!-- FIM da div "topo" -->
<div id="banneropromocional">
<ul>
<li><img src="img/1.jpg" alt="banner" title="oferta" width="980" height="200" /></li>
<li><img src="img/2.jpg" alt="banner" title="oferta" width="980" height="200" /> </li>
<li><img src="img/3.jpg" alt="banner" title="oferta" width="980" height="200" /> </li>
</ul>
</div> <!-- FIM da div "bannerpromocional" -->
<div id="placaofertas">
<img src="img/ofertas/Ofertas da Semana.gif" alt="placa ofertas" width="100" height="80"/>
</div>
<div id="bannerofertas">
<div id="carosel">
<div class="carosel">
<ul>
<li><img src="img/ofertas/1.jpg" alt="banner" title="oferta" /></li>
<li><img src="img/ofertas/2.jpg" alt="banner" title="oferta"/></li>
<li><img src="img/ofertas/3.jpg" alt="banner" title="oferta"/></li>
<li><img src="img/ofertas/4.jpg" alt="banner" title="oferta"/></li>
</ul>
<button class="prev"> Anterior</button> <button class="next"> Proximo</button>
</div> <!-- FIM da div "bannerofertas" -->
<div id="s6">
<div>
<li><img src="img/livros/1.png" alt="banner" title="oferta" width="20" height="20" </li>
<p>Os exemplos, até agora, tem todo o conteúdo da imagem utilizada. Isso foi feito para a simplicidade e porque as imagens demonstração muito bem. Mas não há nenhuma restrição no conteúdo de slides. Os slides podem conter o que quiser.
</p>
</div>
<div id="s6">
<div>
<li><img src="img/livros/2.png" alt="banner" title="oferta" width="20" height="20" </li>
<p>Os exemplos, até agora, tem todo o conteúdo da imagem utilizada. Isso foi feito para a simplicidade e porque as imagens demonstração muito bem. Mas não há nenhuma restrição no conteúdo de slides. Os slides podem conter o que quiser.
</p>
</div>
<div id="s6">
<div>
<li><img src="img/livros/3.jpg" alt="banner" title="oferta" width="20" height="20" </li>
<p>Os exemplos, até agora, tem todo o conteúdo da imagem utilizada. Isso foi feito para a simplicidade e porque as imagens demonstração muito bem. Mas não há nenhuma restrição no conteúdo de slides. Os slides podem conter o que quiser.
</p>
</div>
</div><!--carousellid-->
</body>
</html>
Abaixo o CSS
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#topo {
position:relative;
top:2px;
left:200px;
width:980px;
height:100px;
background-color:#09F;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:2px 2px 2px #0F3;
}
#bannerpromocional {
position:relative;
top:8px;
left:200px;
width:980px;
height:200px;
background-color:#09F;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:2px 2px 2px #0F3;
}
#placaofertas {
position:absolute;
top:350px;
height:100px;
width:80px;
left:200px;
}
#bannerofertas {
position:absolute; relative;
top:315px;
left:300px;
height:181px;
width:625px;
background-color:#09F;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:2px 2px 2px #0F3;
}
#carosel img{
top:14px;
left:320px;
width:145px;
height:167px;
padding:3px;
margin:0 3px;
border-radius:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:2px 2px 2px #0F3
.next {float:right; background:#069;}
.prev {float:left; background:#069;}
#s6 { width: 300px; height: 230px; border: 1px solid #FFFF00; background-color:#FFFF00; }
#s6 div { width: 270px; height: 200px; padding: 15px; color: #FFFFFF; text-align: left; font-size: 16px; }
#s6 div img { float: left; margin: 0 10px 10px 0; width: 100px; height: 100px; padding: 3px; background: #00FFFF }
#imagens{margin:0 auto;border:2px solid #CCC;padding:10px;width:20px; height:20px;margin-top:50px;border-radius:5px;
#imagens ul{margin:0;padding:0;list-style:none
#imagens .pag{margin:20px 0 0 0;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito