Je viens de comprendre que ce n'est pas du tout pareil un diapo classique et un diapo "classique". Du coup j'ai enfin trouvé un diaporama avec un fondu (fade). Il fonctionne parfaitement mais pratiquement tout était sur la feuille HTML. J'ai créé une feuille de style. Ca c'est bon. Mais j'ai aussi voulu créé un script séparé. Et là c'est ca ne marche plus
VOILA le HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple jQuery Slideshow from JonRaasch.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style_diaporama.css">
</head>
<body>
<div id="slideshow">
<img src="images/images_diaporama/image1.jpg" alt="Slideshow image 1" class="active" />
<img src="images/images_diaporama/image2.jpg" alt="Slideshow image 2" />
</div>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="diaporama.js"></script>
</body>
</html>
ET VOILA MON SCRIPT :
$(document).ready(function() {
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
});
AU SECOURS!!!!!!
Modifié par 6l20 (23 Feb 2013 - 12:24)