Home
índice
Página anterior

Carrossel de Notícias

    <head>
	<title>Carrossel de Notícias (jQuery)</title>

<link rel="stylesheet" type="text/css" href="/static/css/style_plugin_carrossel_noticias.css" media="all"/>
<script type= "text/javascript" src= "/teste-carrossel/carro/jquery-1.6.4rc1.js"><</script> 
<script type= "text/javascript" src= "/teste-carrossel/carro/jcarousellite.js"></script>
<script type= "text/javascript" src= "/teste-carrossel/carro/jquery.easing.1.1.js"></script>
<script type= "text/javascript" src="js/funcoes.js"></script> 

    </head>

No Html:			
<div id= "geral">
     <div id= "destaques">
	 <button class="top">Botão Superior</button>
	    <div class= "noticias">

	<ul>
	<li><!-Entre com os links e imagem dentro da <li></li>-->
	<a href= "#"><img src="/static/img/carrossel-noticia6.gif" alt="" title=""/></a>
	<a href= "#"><h1>Colocar o título aqui.</h1></a>

	<p> Colocar o texto aqui, entre parágrafos</p>
		
	</li>
	</ul>
	</div>
	<button class="bottom">Botão Inferior</button>

                  </div>
            </div>

     </body>
</html>

Biblioteca jQuery

O jQuery é uma biblioteca de programação baseada em Javascript. Facilita a utilização de componentes, animações, manipulação de eventos etc.

Para Fazer um Carrossel de Notícias

Para fazer um carrossel com o plugin jcarousellite é necessário a biblioteca e o plugin. Baixar jQuery aqui Todas as Versões da jQuery e o plugin aqui. jcarosellite (download)

Animação personalizada

Se você gosta de efeitos interessantes, existe a flexibilização do plugin. Efeito de atenuação é a melhor coisa que aconteceu com jQuery, depois de si jQuery. Se preferir animar o carrossel usando um efeito de atenuação, tudo que precisa fazer é fornecer um. Exemplo: "bounceout".

Para navegar usando a roda do mouse.

A roda do mouse pode ser usada para rolar de um item para o próximo, não necessariamente botões. Tente rolar a roda do mouse quando passar o mouse sobre o carrossel e ver o que acontece. Pode-se usar tanto os botões de navegação, quanto a roda do mouse no mesmo carrossel, se quiser. Nota: É necessário a roda do mouse plugin Roda do mouse (download) para que isso funcione.

Lembre-se, todos os plugins tem documentação. Podem ser encontrados em Documentation, uma documentação completa sobre o plugin. (Para implementar outros efeitos.) Em Installation já se tem uma noção de como trabalhar com o plugin de uma forma simples básica.

O jQuery é uma biblioteca de programação baseada em Javascript. Facilita a utilização de componentes, animações, manipulação de eventos etc… Os Sliders permitem apresentar várias imagens de forma bastante interactiva, desde a rotação automática, inserção de outros conteúdos como texto ou vídeo, artigos ou serviços. Têm ainda a vantagem de serem altamente flexíveis e fáceis de instalar e configurar. Hoje,desde blog/noticias a sites de instituições, usam sliders de modo a obterem uma maior vantagem na utilização do espaço do seu Website.

Na folha de estilo:
*{margin:0; padding:0;}
img{border:0; padding:0; margin:0;}
ul{list-style:none;}

#geral{
    width:900px;
    height:400px;/*diminui o espaço entre carrossel e o pre 
    (onde está inserido o texto do tutorial*/
    /*border: 3px dotted #F00;*/
    margin: 50px auto; 
    display:table;
}

#destaques{
  width: 600px;
  /*border:2px solid #000;*/
  height: 400px;
  margin: 0 auto; 
  display:inherit; /*herda o display da div acima, não pode ter outra div entre ele e a que vai herdar*/
}

#destaques .top{
   width: 456px;
   height: 30px;
   float:left;
   background-color:#CCC;
   color:#FFF;
   border:none;
   cursor:pointer;
   outline: none;	
} 

#destaques .bottom{
     width: 456px;
     height: 30px;
     float:left;
     background-color:#181818;
     color:#FFF;
     border:none;
     cursor:pointer;
     outline: none;
} 

.noticias{
    width: 454px;
    height:800px;/*tirar a altura pois o texto pode ser maior ou menor -se der erro- deixar*/
    float: left;
    border:1px solid #000;
}

.noticias img{
	float: left;
	margin: 3px;
}
.noticias  h1{
	font:17px Verdana, Geneva, sans-serif;
	color:#002B55;
	margin: 5px;
}
.noticias  h1 a{
	font:17px Verdana, Geneva, sans-serif;
	color:#002B55;
	text-decoration:none;
}

h1:hover{
      font:17px Verdana, Geneva, sans-serif;
      color:#B00000;
      text-decoration:underline;
}

.noticias  p{
      font:13px Arial, Helvetica, sans-serif;
      color:#666;
      margin: 5px;
      padding-bottom:5px;
      text-align:justify;
}

pre{
   margin-top: 15px;
   width: 700px;
   border: 1px dotted #000;
   background-color: #FFF;
   padding: 10px;
  } 

em{
   color: green;
  }

h2, h3{
   text-align: center;
}