با جی کوئری اسلاید شو اختصاصی بسازیم !

- visibility ۳۳ mode_comment

سلام به همه سون لرنی های عزیز،در راستای اهداف آموزشی بخش کاربران ویژه و هم چنین پاسخگویی به محبت های کاربران این بخش از این به بعد سعی میشه مطلب بیشتری در بخش VIP منتشر بشه،برای این مطلب آموزش ساخت یک اسلاید شوی ساده به وسیله فریمورک قدرتمند جی کوئری رو در نظر گرفتیم و ممطئنا همه شما دوست دارید برای وب سایت خودتون یک اسلاید شوی اختصاصی داشته باشید،می تونید این اسلاید شو رو بسط بدید و کلی امکانات دیگه بهش اضافه کنید انشاالله با یاری خداوند و همراهی شما دوستان عزیز در بخش های بعدی این اسلایدر رو به یه افزونه جی کوئری تبدیل میکنیم تا بتونیم راحتتر ازش استفاده کنیم.پس با سون لرن همراه باشید.

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

خوب در ابتدای امر باید این توضیح رو بدم که ما چند تا تصویر داریم که میخوایم این تصاویر پشت سر هم با یه افکت مشخص (fade) و با یه فاصله زمانی مشخص نمایش داده بشن.

کدهای html اسلایدشو

اول از همه قسمت html خودمون رو به این صورت طراحی میکینم.

اول یه تگ نگهدارنده و بعدشم یه تگ div با آیدی slideshow که محتوای اصلی در این تگ قرار میگیره و بعدشم یه لیست نامرتب و در ادامه هم تعداد دلخواهی تصویر در بین تگ های li و a قرار داده شده. در کنار هر a که لینک تصویر رو مشخص میکنه ما یه تگ p هم قرار دادیم این تگ p متن دلخواه در مورد اسلاید رو برای ما نمایش میده (عنوان مطلب).

کدهای CSS اسلایدشو

در ادامه آموزش ما قسمت css رو به این صورت نوشتیم.

تا قسمت wrapper توضیحات خاصی نداره اما خوب بعد از اون رو باید توضیح بدیم؛برا قسمت slideshow ما خاصیت position رو به صورت relative تعریف کردیم که باعث میشه دستمون در جابه حای عناصر داخل تگ باز باشه خاصیت width و height رو مشخص کردیم  و بعدشم خاصیت margin رو بر روی auto قرار دادیم تا دقیقا در وسط عنصر والد خودش قرار بگیره و در نهایت هم کمی افکت سایه.

برای تگ های li زیر مجموعه slideshow ما اومدیم و خاصیت position رو بر روی absolute تنظیم کردیم و این باعث میشه چینش این عناصر از حالت عادی خارج بشه حالا اگه عنصر والد دارای position با مقدار relative باشه میتونیم نسبت به عنصیر والد و در هر مکانی خواستیم قرارشون بدیم حالا اگه نداشته باشه چی ؟ خوب اونوقت نسبت به عنصر اصلی(body و html) چینش پیدا میکنه.خوب خاصیت z-index با مقداری مشخص باعث میشه در محور z کمی جلوتر باشن و همچنین خاصیت opacity رو روی صفر تنظیم کردیم که باعث میشه فعلا هیچ کدموشون نمایش داده نشن.با خاصیت overflow هم مشخص میکنیم که هیچی چیزی از این تگ li بیرون نره.

بعد از این می رسیم به کلاس active برای تگ li از اسمش پیداست یعنی عنصری که الان در حال نمایشه و خوب پس opacity رو برابر 1 قرار دادیم و z-index و هم کمی آوردیم بالاتر.خوب حالا کلاس last-active یعنی اونی که قبلا active بوده و اینجا z-index رو یکی کمتر از حالت active براش قرارمیدیم تا دقیقا مشخص بشه که پشت سر active قرار گرفته.برای تگ p که قرار مطلب رو نشون بده هم کلاس title رو در نظر گرفتیم که استایلش مشخصه.

خوب در صفحه بعد کدهای جاوااسکریپت رو تکمیل میکنیم.

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

بسیار عالی و مفید بود سپاس از شما

majid zare

ممنون از سایت خوب شما
من یک قالب وردپرس با آموزشهای شما ایجاد کردم که الان روی دامنه modposh.ir نصب شده
2 روز هست که همه افزونه های اسلاید شو را امتحان کردم مثل Cyclone Slider 2 ولی تو همه اونها تصاویر ثابت بود و علت را نفهمیدم
تا اینکه امروز عضو سایت شما شدم و در حال استفاده از آموزش اسلاید شو شما هستم مطمئن هستم مثل بقیه آموزش های شما مفید و کاربردی و قابل استفاده هست
فقط اگر امکان داشت و اینجا جای مناسبی بود بفرمایید چرا قالب من از افزونه هایی مثل Cyclone Slider 2 پشتیبانی نمیکنه و تصاویر را ثابت و در جا نشون میده
با تشکر

لقمان آوند

لطفا تو انجمن تاپیکی رو در مورد مشکلتون باز کنید و مطرح کنید. اعضای vip در اونجا سریعا پاسخ می گیرند .

mehrdad

سلام . میخواستم بدونم چطور میتونم برای این اسلایدشو دکمه های تصویر بعد و قبل و همچنین وقتی ماوس روی اسلایدشو قرار گرفت stop بشه و وقتی ماوس از روش کنار رفت مجدد play بشه .

با تشکر

کیوان علی محمدی

چند تا روش برای پیاده سازی این چیزی که شما گفتین وجود داره که باید کدهای تغییر دهنده تصاویر رو به صورت تابع نوشتن که چند تا پارامتر داره مثل دکمه و direction و طبق این پارامتر ها تصویر تغییر کنه.

a-m-m

با سلام
جناب علی محمدی دقیفا میتونین با کد توضیح بدین این کار رو چطوری میشه انجام داد

کیوان علی محمدی

سلام متاسفانه این کار کمی وقت گیر هستش.

nasrin rafati


من دقیقا همین کدهای شما رو نوشتم اما فقط عکس اول رو نشون میده یعنی hide میشه دوباره همونو نشون میده اینم بگم وقتی کدهای شما رو کپی میکنم مشکلی نداره ولی وقتی خودم همین کد رو مینویسم مشکل داره چرا؟

کیوان علی محمدی

وقتی کدهای ما رو کپی می کنید درسته پس حتما کدهای خودتون یه مشکلی داره،خط به خط چک کنید.

gtanori

برای اعضا عادی هم این آموزش را بزارید خدا را خوش میاد

Mahdi

ای کاش برای دکمه جلو و عقب هم براش میگذاشتی…

as do

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

لقمان آوند

اصلاح شد

حسین میراحمدی

سلام لینک دانلود 400 Bad Request میده لطفا اصلاح کنید .

لقمان آوند

اصلاح شد

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2