ساخت اسلایدر عکس با jQuery


ساخت اسلایدر عکس با jQuery

بروزرسانی در ۱۳۹۷/۰۱/۲۵ : افزودن قابلیت pause به اسلایدر

در این آموزش, فصد داریم به شما نحوه ساخت اسلایدر عکس با jQuery را نشان بدیم. در آموزش jQuery قبلی , یک نمونه از ساخت اسلایدشو با جی کوئری را دیدیم.

در این مثال , ما از کتابخانه jQuery UI برای ساخت اسلایدر تصویر بهره می بریم. که افکت های جالبی برای slide کردن تصاویر در اختیار ما قرار می دهد.

ساخت اسلایدر عکس با jQuery

کد HTML نمایش عکس های اسلایدر

این کد به شما تصاویر اضافه شده به پنجره slider را نشان می دهد.

افکت ساخت اسلایدر عکس با jQuery

کد jQuery زیر از کتابخانه jQuery UI برا افزودن افکت slide به تصاویر استفاده می کند.

و کد زیر بعد از آماده سازی DOM فراخوانی می شود .

حتما بخوانید  ساخت منوی جمع شونده با jQuery

ساخت اسلایدر عکس با jQuery با قابلیت ایست (pause)

برای استفاده از قابلیت ایست در اسلایدری که ساختیم می توانید به جای اسکریپت بالا از کد زیر استفاده کنید. کد دقیقا مشابه کد بالا است بجز اینکه یک قسمت برای pause کردن اسلایدر تصویر را اضافه کردیم برای همین نیازی به تغییر کد HTML نیست.

به اینصورت که بعد از نگه داشتن ماوس روی یکی از اسلایدها (hover) متغییر pause مقدار true را به خود میگیرد که در یک شرط تعریف کردیم تا کد اجرای اسلایدر در صورتی که مقدار pause = true باشد اجرا نشود.

امیدوارم از آموزش ساخت اسلایدر عکس با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

حتما بخوانید  ساخت مگامنو در jQuery

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

دانلــود بـاکـــس

لینک های دانلود به ایمیل شما ارسال می شود
با عضویت در سایت می توانید تمامی فایل ها را به صورت مستقیم دانلود کنید
حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

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

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

عضویت در خبرنامه