خانه » jQuery » ایجاد یک اسلایدر ساده عکس در jquery

ایجاد یک اسلایدر ساده عکس در jquery

ایجاد یک اسلایدر ساده عکس در jquery
امتیاز دهی به این نوشته

استفاده از اسلایدر ها برای زیبایی سایت و هم چنین مشخص نمودن مطالب مهم یکی از مواردی هست که در طراحی وب استفاده می شود.

اسلایدر های آماده زیادی برای این کار وجود داره اما بعضا حجم بسیار بالایی دارن و از این بابت مشکلاتی رو ایجاد میکنند.

در این مطلب بسادگی یاد میگیرید که یه اسلایدر ساده با جی کوئری بسازید.

کدهای HTML

برای شروع این کدهای HTML رو در صفحه قرار میدیم.

<div class="slides">
 <img src="img1.jpg">
 <img src="img2.jpg">
 <img src="img3.jpg">
</div>

خوب توضیح خاصی که نداره،حالا کمی براش استایل اضافه می کنیم.

.slides { position:relative;}
.slides img { position:absolute; left:0; top:0; }

خوب حالا هم نوبت کدهای جی کوئری هستش.

کدهای jQuery

$(function(){
 $('.slides img:gt(0)').hide();
 setInterval(function(){
 $('.slides :first-child').fadeOut()
 .next('img').fadeIn()
 .end().appendTo('.slides');},
 3000);
 });

به همین راحتی،درباره کدهای جی کوئری بگم که اولش همه تصاویر موجود رو مخفی میکنیم،حالا با setInterval میخوایم یه تابع رو در بازه زمانی مشخص فرخوانی کنیم اینجا هر ۳ ثانیه یکبار،خوب در این تابع اولین تصویر رو مخفی میکنیم و بعدش تصویر بعدی رو ظاهر میکنیم و بعدشم دوباره همون تصویر اولی که مخفی کردیم رو به انتهای slides اضافه میکنیم،اینطوری مثل حلقه ی تکرار میشه و تصاویر برای ما نشون داده میشن.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *