ایجاد یک اسلایدر ساده عکس در 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 اضافه میکنیم،اینطوری مثل حلقه ی تکرار میشه و تصاویر برای ما نشون داده میشن.

1393/3/15       00000             ایجاد یک اسلایدر ساده عکس در jquery       jQuery



پایگاه اطلاع رسانی انجمن فناوری اطلاعات , پایگاه اطلاع رسانی 42152.ir , پایگاه اطلاع رسانی اخترشناسان ایران , پایگاه اطلاع رسانی شهید شیرودی , پایگاه اطلاع رسانی ابزارهای فناوری اطلاعات , پایگاه اطلاع رسانی با فرهنگ , پایگاه اطلاع رسانی فروش محصولات فرهنگی , پایگاه اطلاع رسانی اطلس ها , پایگاه اطلاع رسانی پرهام حیدرنیا , پایگاه اطلاع رسانی روندها Trand.ir , پایگاه اطلاع رسانی نرم افزارهای جغرافیایی , پایگاه اطلاع رسانی 88080.ir , پایگاه اطلاع رسانی همیار اس ام اس و پیامک های انبوه , پایگاه اطلاع رسانی آرک مپ ArcMap.ir , پایگاه اطلاع رسانی بهترین گروه و انجمن , پایگاه اطلاع رسانی ArcObject.ir , پایگاه اطلاع رسانی مدیریت و دسترسی به آدرسها و لینکهای اینترنتی
وبلاگ گروه فنی مهندسی پرهاست , , موسسه توسعه روانشناسى و مشاوره سايدا , , موسسه توسعه روانشناسى و مشاوره سايدا , , گروه فنی مهندسی پرهاست , , وبلاگ پرهاست
Copyright © 2002-2018, hamyaarsms.ir. Design and Hosting by ParHost All Rights Reserved.
2658