أستفسار عن ماهي فكرة عمل الـ Slider بواسطة الـ Jquery

يمكنك التلاعب بقيمة الخاصية left .

هذا مثال بسيط لتوضيح الفكرة (استعملت الدالة animate الخاصة ب jquery لل animation)

<html>
  <head>
	<style>
		#container_slider {
			overflow: hidden;
			width: 500px;
			height: 500px
		}
		#slider {
			position: relative;
			left: 0;
		}
		#container_slider img {
			float: left;	
			width: 500px;
			height: 500px		
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		var width = 500, sliderWidth;
		$(function() {
			sliderWidth = width * $("#slider").children('img').length;

			setInterval(animate, 1000);
			$("#slider").css('width', sliderWidth+'px');
		});
		function animate() {
			var left = $("#slider").css('left');
			$("#slider").animate({'left': '-='+width}, 500, function() {
				var left = Math.abs(parseInt($("#slider").css('left')));
				if (left >= sliderWidth) $("#slider").css('left', '0');
			});
		}
	</script>
  </head>
  <body>
	<div id="container_slider">
		<div id="slider">
			<img src="http://upload.wikimedia.org/wikipedia/commons/8/8d/Earth-Erde.jpg" />
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Nasa_blue_marble.jpg/585px-Nasa_blue_marble.jpg" />
			<img src="http://upload.wikimedia.org/wikipedia/commons/2/29/Orange_earth_warming.jpg" />
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/07/537521main_earth_pacific_full.jpg/640px-537521main_earth_pacific_full.jpg" />
		</div>
	</div>
  </body>
</html>