Faire un slyder avec jQuery.

Transcription

Faire un slyder avec jQuery.
/***** Code de la page : slider.php *****/
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>slider</title>
<link href=”../css/reset.css” rel=”stylesheet” type=”text/css”>
<link href=”../css/style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<article>
<div id=”galerie”>
<img src=”images/header_herbes.png” class=”active” width=”950” height=”200” alt=”image 1.”>
<img src=”images/header_sous_bois.png” width=”950” height=”200” alt=”image 2.”>
</div>
<h2>Faire un slider en jquery.</h2>
</article>
</body>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”func.js”></script>
</html>
/***** Code de la page : func.js *****/
/* alert (“hello world.”); */
function imageGalerie(){
var active = $(‘#galerie .active’);
var next = (active.next().length > 0) ? active.next() : $(‘#galerie img:first’);
active.fadeOut(function(){
active.removeClass(‘active’);
next.fadeIn().addClass(‘active’);
});
}
setInterval(‘imageGalerie()’,2000);
/***** Code de la page : style.css *****/
#tutorial{
margin:30px 0 40px 0;
}
#galerie{
width:950px;
height:200px;
margin-bottom:40px;
}
#galerie img{
position:absolute;
display:none;
}
#galerie .active{
display:block;
}

Faire un slyder avec jQuery.

Transcription

Documents pareils

corporations