Atenção: Precisando de assessoria nos seus PROJETO entre em contato com a SGP
E-mail: ajudastrabalhosprogramacao@gmail.com
<!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.
Atenção: Precisando de ajuda entre em contato com a SGP e solicite uma assessoria com a melhor equipe do mercado no desenvolvimento de trabalhos acadêmicos
E-mail: ajudastrabalhosprogramacao@gmail.com
Facebook: fb.me/ajudaemTrabalhosdeprogramacao
0 comentários:
Postar um comentário