Home
Carrossel com JQuery
NO Html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="Carrossel com Jquery"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Carrossel com jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style_index.css">
<script type="text/javascript" src="/static/js/jquery.min.js" ></script>
<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
<section id="galeria" >
<section id="buttons" >
<a href="#" class="prev" >«</a>
<a href="#" class="next" >»</a>
</section >
<ul>
<li>
<span>
Hennessey Venom GT---
No ano de 2014, o carro classificado como superesportivo atingiu nada menos que 435,3 km/h.
Para você ter uma ideia, o tempo que o seu carro demora para ir de 0 a 100 km/h este carrinho
de 1,2 milhão de dólares vai de 0 a 300 km/h!
</span>
<img src="img/henesseyvenongt.jpg" >
</li>
<li>
<span>
Bugatti Veyron 16.4---
Vocês acham que a frota de belos e rápidos carros italianos se resume à Ferrari, Lamborghini
e Alfa Romeo? Então conheçam o Bugatti Veyron. Lançado em 2010, já chegou a atingir 431 km/h,
mas a montadora colocou um limite de velocidade para, "no máximo", 415 km/h. Podendo ir de 0
a 100 km/h em 2s2, esta belezura vale 2,35 milhões de dólares.
</span>
<img src="img/bugattiveyron.jpg" >
</li>
<li>
<span>
SSC Ultimate Aero TT© Divulgação
A discreta montadora norte-americana, que não é tão popular assim, criou um carro rápido a
preços acessíveis, para a alegria daqueles que não têm como gastar muito dinheiro, mas querem
impressionar a todos com autenticidade. Lançado em 2009, o Aero TT vale 590 mil dólares e
chegou a 430 km/h em testes na fábrica.
</span>
<img src="img/sscultimateaerott.jpg" >
</li>
<li>
<span>
Koenigsegg Agera R
Os suecos sabem fazer carros bons e muito velozes - apesar de caros. O Agera R, lançado em 2011,
custa "módicos" 1,530 milhão de dólares e atinge 420 km/h, sendo que, de 0 a 100, cumpre em 2s8.
</span>
<img src="img/koenigseggagera.jpg" >
</li>
<li>
<span>
Capacidade para 6.296 passageiros, tripulação com 2.165 pessoas, comprimento de 362 metros,
altura de 75 metros e área suficiente para comportar 16 deques, quatro piscinas, 56 árvores,
12 mil plantas, 25 restaurantes, 37 bares, simuladores de surfe, paredes de escalada, heliponto
e um enorme centro de espetáculos ao ar livre. Esses são alguns dos números do Allure of the
Seas, transatlântico que, inaugurado em 2010, é atualmente o maior navio de cruzeiro do mundo.
</span>
<img src="img/naviomaiormundo.jpg" >
</li>
<li>
<img src="img/maiorcargueiro.jpg" >
<span>
O nome do navio, Triple-E, faz menção a três conceitos: “energy, efficiency e environmental
protection” (energia, eficiência e proteção ambiental).Dimensões: 400 metros de comprimento,
59 metros de largura e 73 metros de altura. Capacidade: 165 mil toneladas. Assim, ele poderia
transportar toda a produção de soja dos EUA que será exportada para a China entre este ano e
o próximo de uma só vez, por exemplo. Propulsão: dois motores a diesel, com 42.913 cavalos de
potência cada. Projetados para que o navio consuma menos combustível e não alcance altas
velocidades (no máximo 42 km/h).
</span>
<img src="img/maiorcargueiro.jpg" >
</li>
<li>
<span>
O Project 941 ou Akula, do Russo "?????" ("Shark", "Tubarão") da classe de submarinos Typhoon, com
um deslocamento submerso de mais de 48.000 t, é a maior classe de submarinos do mundo. É um submarino
de propulsão nuclear equipado com mísseis balísticos. Dmitry Donskoy, o primeiro dos seis submarinos
da classe, foi encomendado em 1981 e ainda está em serviço ativo com a Marinha russa. Submarinos da
classe Typhoon tem um comprimento de 175m, feixe de 23m e calado de 12m. Ele é alimentado por dois
reatores nuclear de água, duas turbinas a vapor de 50.000 cv e quatro turbogeradores de 3.200 KW.
Ele pode navegar com uma velocidade de 22.2kt na superfície e abaixo 27kt água.
</span>
<img src="img/maiorsubmarino.jpg">
</li>
<li>
<span>
O Airbus A380, desenvolvido e construído pela Airbus S.A.S. (EADS Systems), é o maior avião comercial
de passageiros da história. O avião, chamado frequentemente de Superjumbo, fez seu primeiro voo
experimental em 27 de abril de 2005 em Toulouse, França. O A380 demorou mais de dez anos e custou cerca
de 12 bilhões de euros ou (R$ 35,1 bilhões) para ser desenvolvido. Tripulação /Equipa 2 - piloto e
co-piloto Capacidade de passageiros de 525 (três classes) a 853 (uma classe) passageiros.
</span>
<img src="img/maioraviaopassageiro.jpg" >
</li>
</ul>
</section>
Na folha de estilo:
/*Documento CSS - style_index_.css - Criando um Slide
em jQuery sem Plugin) 05/novembro/2014*/
*{
margin:0;
padding:0;
}
body{
background:#181818;
opacity:0.7;
}
#container{
background:#fff;
width: 820px;
/*height: 400px;*/
padding: 20px;
margin:0 auto;
}
h2{
text-align: center;
}
section#galeria {
/*border: 2px solid red;*/
background:#fff;
width: 700px;
height: 400px;
display:block;
overflow:hidden;/*esconde todas as imagens*/
box-shadow:#999 00 15px;
margin:50px auto;
}
section#galeria section#buttons {
display:none;/*botao fica escondido*/
position:absolute;
margin:9px;
z-index: 501;
}
section#galeria section#buttons a{
background: #333;
width: 50px;
height: 40px;
display:inline-block;/*aumenta o tamanho do display*/
text-align:center;
line-height:40px;
font:bold 24px Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
opacity:0.7;
}
section#galeria section#buttons a:hover{
background: #888;
}
section#galeria ul{
list-style:none;
display:table;
position:relative;
}
section#galeria ul li{
width:700px;
height: 400px;
display:inline-block;
position:relative;
}
section#galeria ul li img{
width:100%;
height: 100%;
}
section#galeria ul li span{
background: #333;
width:660px;
display:table;
padding:10px;
opacity:0.7;
position:absolute;
bottom:0;
margin:10px;
font:12px "Lucinda Grande", "Lucinda Sans Unicode", Verdana, sans-serif;
color:#fff;
}
No JavaScript:
/*
autor : Maria Adalgisa de Souza
descrição : carrossel com jquery
slide.js
*/
$(function(){
var liWidth = $("galeria ul li").outerWidth(),
speed = 5000,
rotate = setInterval(auto, speed);
//mostra os botões
$("section#galeria").hover(function(){
$("section#buttons").fadeIn();
}, function(){
$("section#buttons").fadeOut();
});
//proximo
$(".next").click(function(e){
e.preventDefault();
$("section#galeria ul").css({'width':'99999%'}).animate({left:-liWidth}, function(){
$("#galeria ul li").last().after($("#galeria ul li").first());
$(this).css({'left':'0', 'width':'auto'});
});
});
//voltar
$(".prev").click(function(e){
e.preventDefault();
$("#galeria ul li").first().before($("#galeria ul li").last().css({'margin-left':-liWidth}));
$("section#galeria ul").css({'width':'99999%'}).animate({left:liWidth}, function(){;
$("#galeria ul li").first().css({'margin-left':'0'});
$(this).css({'left':'0', 'width':'auto'});
});
});
function auto(){
$(".next").click();
}
});
Criando slide de imagens com Jquery===
Gerador de Gradiente
