ساخت اسلایدشو با jQuery

در آموزش ساخت اسلایدشو با jQuery , قصد داریم به شما نحوه نمایش تصاویر را بصورت اسلایدشو (slideshow) با جی کوئری با پخش خودکار را نمایش بدیم. در آموزش قبلی, یک مثال از بارگذاری خودکار در jQuery را دیدیم.

ما لیستی از تصاویر برای نمایش در یک اسلایدشو داریم . در اینجا از توابع fadeIn()/fadeOut() در جی کوئری برای نمایش تک به تک عکس ها در اسلاید استفاده کردیم.

کد HTML لیست تصاویر

این کد شامل یک لیست از عکس ها داخل یک تگ DIV است.

<div id="image-slide">
	<img class="slide" src="slides/beach1.jpg"/>
	<img class="slide" src="slides/beach2.jpg"/>
	<img class="slide" src="slides/beach3.jpg"/>
	<img class="slide" src="slides/beach4.jpg"/>
	<img class="slide" src="slides/beach5.jpg"/>
</div>

</div>

کد : ساخت اسلایدشو با jQuery

این تابع لیست تصاویر را در یک زمان مشخص (۲٫۴ ثانیه) با تابع fadeIn() و fadeOut() نمایش/مخفی می کند.

$(document).ready(function() {
	$(".slide:first").show();
	setInterval(function(){ Next($('.slide:visible'))}, 2400);

});
function Next(slide) {
	slide.fadeOut();
	if(typeof slide.next().attr('src') !== 'undefined') {
		slide.next().fadeIn();
	} else {
		$('.slide:first').fadeIn();
	}
}