Skip to content

Instantly share code, notes, and snippets.

@rodurma

rodurma/gist:3227677

Created August 1, 2012 15:12
Show Gist options
  • Save rodurma/3227677 to your computer and use it in GitHub Desktop.
Save rodurma/3227677 to your computer and use it in GitHub Desktop.
Download ZIP
Slider simples Jquery
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".cena").hide();
cenas = [];
cena_ativa = -1;
$("#slider").find(".cena").each(function(){
cenas.push($(this).attr('id'));
});
totalCenas = cenas.length;
trocaCena();
setInterval(trocaCena, 5000);
});
function trocaCena(){
if (cena_ativa < totalCenas-1){
cena_ativa++;
proxima_cena = cena_ativa;
anterior_cena = cena_ativa-1;
} else {
cena_ativa = 0;
proxima_cena = cena_ativa;
anterior_cena = totalCenas-1;
}
$("#"+cenas[proxima_cena]).fadeIn(1100);
$("#"+cenas[anterior_cena]).fadeOut(1100);
}
</script>
<style type="text/css">
#slider {
position: relative;
}
.cena {
position: absolute;
}
</style>
<div id="slider">
<div class="cena" id="cena1">testeeeeeeee 1</div>
<div class="cena" id="cena2">aaaaaaaaaaaaa 1</div>
<div class="cena" id="cena3">bbbbbbbbbbbb 1</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment