ایجاد یک اسلایدر ساده عکس در 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



 7Agahi.ir سامانه تبلیغاتی 7 آگهی
7Agahi.ir سامانه آگهی رایگان هفت آگهی


یادداشتها و چرکنویس های من parhost.net گروه فنی مهندسی پرهاست
یادداشتها و چرکنویس های من… یادداشتها ، مطالب ، نکات مهم و کاربردی … :: parhost.net گروه فنی مهندسی پرهاست


پایگاه اطلاع رسانی آرک مپ ArcMap.ir , پایگاه اطلاع رسانی مدیریت و دسترسی به آدرسها و لینکهای اینترنتی , پایگاه اطلاع رسانی بهترین گروه و انجمن , پایگاه اطلاع رسانی اخترشناسان ایران , پایگاه اطلاع رسانی اطلس ها , پایگاه اطلاع رسانی روندها Trand.ir , پایگاه اطلاع رسانی انجمن فناوری اطلاعات , پایگاه اطلاع رسانی 88080.ir , پایگاه اطلاع رسانی با فرهنگ , پایگاه اطلاع رسانی نرم افزارهای جغرافیایی , مهد کودک نهال زندگی دو زبانه و دارای امکانات کامل و متنوع آرامش و آسودگی خیال برای والدین اولین هدیه نهال زندگی است سعادت آباد، خیابان یکم(جمشیدی)، خیابان شبنم، کوچه لاله پلاک 6 22094686 - 22382103 www.MahdeNahaleZendegi.com , پایگاه اطلاع رسانی ابزارهای فناوری اطلاعات , پایگاه اطلاع رسانی پرهام حیدرنیا , مهد کودک نهال زندگی دو زبانه و دارای امکانات کامل و متنوع آرامش و آسودگی خیال برای والدین اولین هدیه نهال زندگی است سعادت آباد، خیابان یکم(جمشیدی)، خیابان شبنم، کوچه لاله پلاک 6 22094686 - 22382103 www.MahdeNahaleZendegi.com , پایگاه اطلاع رسانی ArcObject.ir , پایگاه اطلاع رسانی فروش محصولات فرهنگی
گروه فنی مهندسی پرهاست , , آموزش هنرهای دوزندگی و چهل تکه دوزی با شادی در شادی دوز با مدیریت مهین حیدرنیا ShadiDooz.ir , , وبلاگ گروه فنی مهندسی پرهاست , , 7Agahi.ir سامانه آگهی رایگان هفت آگهی , , وبلاگ پرهاست
Copyright © 2002-2019, 88080.ir. Design and Hosting by ParHost All Rights Reserved.
7243