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



پایگاه اطلاع رسانی FreeP30.ir , پایگاه اطلاع رسانی پشتیبانی از خدمات و سرویسهای ارائه شده به شما , پایگاه اطلاع رسانی دانشجویان رشته روانشناسی تربیتی دانشگاه آزاد واحد علوم تحقیقات تهران , پایگاه اطلاع رسانی 42152.ir , پایگاه اطلاع رسانی انجمن فناوری اطلاعات , پایگاه اطلاع رسانی نجوم و اختر شناسی , پایگاه اطلاع رسانی فروش محصولات فرهنگی , پایگاه اطلاع رسانی دانشجویان دانشگاه مجازی فاران , پایگاه اطلاع رسانی نیستی؟ , پایگاه اطلاع رسانی همراه اولی ، مدیریت پیامک و SMS , پایگاه اطلاع رسانی ابزارهای مدیریت و ویرایش تصویر و عکس آنلاین بصورت رایگان , پایگاه اطلاع رسانی نرم افزارهای جغرافیایی , پایگاه اطلاع رسانی مدیریت و دسترسی به آدرسها و لینکهای اینترنتی , پایگاه اطلاع رسانی شهید شیرودی , پایگاه اطلاع رسانی آقای محمودپور , پایگاه اطلاع رسانی روندها Trand.ir , پایگاه اطلاع رسانی با فرهنگ , پایگاه اطلاع رسانی بهترین گروه و انجمن , پایگاه اطلاع رسانی ArcObject.ir , پایگاه اطلاع رسانی بررسی رتبه و رنک سایت , پایگاه اطلاع رسانی تولید کننده نقشه سایت , پایگاه اطلاع رسانی بهترین هاست , پایگاه اطلاع رسانی مدیریت ارسال و دریافت پیامک انبوه , پایگاه اطلاع رسانی همیار اس ام اس و پیامک های انبوه , پایگاه اطلاع رسانی آقای حاج سلمانی , پایگاه اطلاع رسانی 88080.ir , پایگاه اطلاع رسانی آقای گودرزی , پایگاه اطلاع رسانی پرهام حیدرنیا , سامانه مدیریت محتوای parcms.ir , پایگاه اطلاع رسانی پدیده شیراز , پایگاه اطلاع رسانی آقای کندی , پایگاه اطلاع رسانی دی جی 115 , پایگاه اطلاع رسانی حیدرنیا , پایگاه اطلاع رسانی درخشان , پایگاه اطلاع رسانی مدیریت پیامکهای انبوه , پایگاه اطلاع رسانی آرک مپ ArcMap.ir , پایگاه اطلاع رسانی FreePC.ir , پایگاه اطلاع رسانی اطلس ها , پایگاه اطلاع رسانی ابزارهای فناوری اطلاعات , پایگاه اطلاع رسانی خوابگاه های دانشجویی و کارمندی , پایگاه اطلاع رسانی کلیل ، کلیل فارس ، شهر اقلید , پایگاه اطلاع رسانی دی جی 2000 , پایگاه اطلاع رسانی ابزارهای مدیریت محتوای وردپرس , پایگاه اطلاع رسانی اولین همراه , گروه پرهاست , پایگاه اطلاع رسانی اخترشناسان ایران , پایگاه اطلاع رسانی تب فا TabFa.ir
تبلیغ گروه فنی مهندسی پرهاست , , تبلیغ گروه فنی مهندسی پرهاست
Copyright © 2002-2017, farhangshop.ir. Design and Hosting by ParHost All Rights Reserved.
6033