Pages

sexta-feira, 4 de julho de 2014

Carrossel em javaScript

Neste primeiro Artigo vou ensinar como fazer um Carrossel básico igual que esta na imagem abaixo usando html, css e javaScript.

primeiro vamos definir o html crie um arquivo novo eu vou definir como index.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Carrosel</title>
</head>
<body>
</body>
</html>

Crie uma div chamado carrosel e dentro dessa div crie um lista e dentro desta lista coloque as imagem que você quer que apareça na página.
<div id="carrosel">
      <ul>
            <li><img src="01.jpg" alt="imagem1" /></li>
           <li><img src = "02.jpg"  alt="imagem2" /></li>
   <li><img src = "03.jpg"  alt="imagem3" /></li>
  <li><img src = "04.jpg"  alt="imagem4" /></li>
  <li><img src = "05.jpg"  alt="imagem5" /></li>
  <li><img src = "06.jpg"  alt="imagem6" /></li>
      </ul>
</div>

E fora dessa div carrosel coloque um paragrafo e dentro dele coloque um dois link para servir como botão para poder movimentar para frente e para trás as imagens e dentro do link coloque defina duas classe um como "prev" e a outra como "next".Aqui você poderá colocar uma imagem também.
<p>
   <a href="#" class="prev"> <<  </a>
   <a href="#" class="next">  >>  </a>

Depois de ter terminado o HTML vamos para javaScript. Primeiramente vamos ter que baixar o jQuery que pode ser encontrado no site http://jquery.com/ e também vamos precisar do jcarousellite que pode ser encontrado aqui http://www.gmarwaha.com/jquery/jcarousellite/.Agora que foi baixado os dois arquivos vamos fazer sua chamada no index.html.

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>

Agora precisamos vamos dar continuidade em nosso código. Dentro do head ou em um arquivo separado crie uma função para controlar a velocidade que cada imagem vai passar a quantidade de tempo que vai ficar parado e quantos imagem vai ficar definido na tela.

<script text="javascript">
$(function(){
$("#carrosel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
auto    : 1000,
speed   : 2000,
visible : 3,
scroll:1
});

</script>
Depois disso vamos para o CSS.
#carrosel{
background:#c0c0c0;
width:950px;
height:200px;
overflow:hedden;
border:1px solid black;
padding:5px 0px;
border-radius: 5px;
}
#carrosel ul{
list-style:none;
}
#carrosel ul li{
float:left;
display:inline;
}
#carrosel ul li img{
width: 250px;
height: 200px;
}

Este foi um artigo bem simples mais que poderá ajudar muitas pessoas que estão começando a criar suas páginas web e deixar com um Layout melhor.
Qualquer dúvida sobre o artigo ou precisando de ajuda em algum trabalho
deixem um comentário  ou entre em contato pelo E-mail: marcofernando71@gmail.com.

0 comentários:

Postar um comentário