animation jquery

salut

j'essaie de créer un slider avec jQuery, mais j'ai rencontré un problème qui je n'arrive pas à résourdre

voici mon code 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>e-itconsulting</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="js/slideShow.js"></script>
</head>

<body>

	<div id="slide_show">
	 <div id="slide_container">
	  <img class="slide" src="images/Collines.jpg" alt="" />
	 </div>
	</div>

</body>

</html>

la feuille de style :

body {
	margin: 0;
	padding: 0;
}

#slide_show, #slide_container {
	width: 800px;
	height: 350px;
}

#slide_show {
	position: relative;
	border: solid 1px #999;
	margin: 30px 0;
	overflow: auto;
}

.slide {
	width: 800px;
	height: 350px;
	position: absolute;
}

.elem {
	position: absolute;
}

et enfin, voila mon script :

$('document').ready(function(){

	var elements = new Array;
	var elemIndex = 0;
	var nbrHorisElem = 8;
	var nbrVertiElem = 8;
	var TotalElem = nbrHorisElem*nbrVertiElem;
	var imgSrc;
	var slideStart;
	var slideEffect;
	var slideInterval = 1000;
	var slideEffectInterval = 10;
	var imageIndex = 0;
	var images = ['Collines.jpg', 'Coucher_de_soleil.jpg', 'Hiver.jpg', 'Nénuphars.jpg'];

	(function($){
		$.inArray = function(array, val) {
			var l = array.length;
			for( i=0; i<l; i++ ) {
				if(array[i] == val) {
					return true;
				}
			}
			return false;
		}
	})(jQuery);
	
	(function($){
		$.randElem = function(){
			for (i=0; i<TotalElem; i++){
				elements[i] = i;
			}
			var i;
			var Num;
			var Nbr = elements.length;
			var Tab = new Array();
			Tab = Tab.concat(elements);
			while( Nbr > 0){
				Num = Math.floor(Math.random() * Nbr);
				Nbr--;
				szTmp = Tab[Num];
				for( i= Num; i < Nbr; i++){
					Tab[i] = Tab[i+1];
				}
				Tab[ Nbr] = szTmp;
			}
			Tab.reverse();
			elements = Tab;
		};
	})(jQuery);
	
	(function($){
		$.nextImage = function(){
			if ( $('.elem:eq(0)').index() > 0 ) {
				$('.slide').attr('src', imgSrc);
				$('.elem').remove();
			}
			if ( imageIndex < images.length-1 ) {
				imageIndex++;
			} else {
				imageIndex = 0;
			}
			imgSrc = 'images/'+images[imageIndex];
			$('<img/>').attr({
				'src': imgSrc,
				'alt': ''
			}).addClass('nextSlide').appendTo('#slide_container').hide();
		};
	})(jQuery);

	(function($){
		$.slide = function(){
			$.randElem();
			if ( elemIndex < elements.length ) {
				$('.elem').eq(elements[elemIndex]).animate({
					'opacity': 1
				}, 'slow');
				elemIndex++;
				slideEffect = setTimeout($.slide, slideEffectInterval);
			} else {
				elemIndex = 0;
				clearTimeout(slideEffect);
				slideStart = setTimeout($.cut, slideInterval);
			}
		};
	})(jQuery);

	(function($){
		$.cut = function(){
			$.nextImage();
			var imgW = $('.slide').width();
			var imgH = $('.slide').height();
			var elemW = imgW / nbrHorisElem;
			var elemH = imgH / nbrVertiElem;
			var posTop = 0;
			var posLeft = 0;
			var n = 0;
			for ( i=1; i<=nbrHorisElem; i++ ) {
				for ( j=1; j<=nbrVertiElem; j++ ) {
					$('<div></div>')
					.addClass('elem').css({
						'width': elemW,
						'height': elemH,
						'top': posTop,
						'left': posLeft,
						'background-image': 'url('+imgSrc+')',
						'background-position': (-posLeft)+'px '+(-posTop)+'px',
						'opacity': 0
					}).appendTo('#slide_container');
					posLeft += elemW;
					n++;
				}
				posLeft = 0;
				posTop += elemH;
			}
			$('.nextSlide').remove();
			$.slide();
		};
	})(jQuery);

	slideStart = setTimeout($.cut, 1000);

});

testez le code, et vous allez voire de quoi je parle.

mon slider jquery plante !

animation jquery

Supprimer

Modérer

Signaler le message aux modérateurs