در آموزش ساخت اسلایدشو با jQuery , قصد داریم به شما نحوه نمایش تصاویر را بصورت اسلایدشو (slideshow) با جی کوئری با پخش خودکار را نمایش بدیم. در آموزش قبلی, یک مثال از بارگذاری خودکار در jQuery را دیدیم.
ما لیستی از تصاویر برای نمایش در یک اسلایدشو داریم . در اینجا از توابع fadeIn()/fadeOut() در جی کوئری برای نمایش تک به تک عکس ها در اسلاید استفاده کردیم.
کد HTML لیست تصاویر
این کد شامل یک لیست از عکس ها داخل یک تگ DIV است.
1 2 3 4 5 6 7 |
<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> |
کد : ساخت اسلایدشو با jQuery
این تابع لیست تصاویر را در یک زمان مشخص (۲٫۴ ثانیه) با تابع fadeIn()
و fadeOut()
نمایش/مخفی می کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(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(); } } |
امیدوارم از آموزش ساخت اسلایدشو با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
فقط باید بگم دمت گرم
سلام. خوشحالیم که مفید واقع شده.
موفق و پیروز باشید