تخفیف ویژه

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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 7 دقیقه
۱۸ دی ۱۳۹۲

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

دموی نهایی اسلایدشو (اختصاصی سونلرن)

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

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

فهرست محتوای این مقاله

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SlideShow</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="slideshow">
                <ul>
                    <li class="active"><a href="#"><img  src="img/slide1.jpg" alt="Slideshow Image 1"  /></a><p class="title" >عنوان مطلب اول</p></li>
                    <li><a href="#"> <img src="img/slide2.jpg" alt="Slideshow Image 2" /></a><p class="title" >عنوان مطلب دوم</p></li>
                    <li><a href="#"><img src="img/slide3.jpg" alt="Slideshow Image 2" /></a><p class="title" >عنوان مطلب سوم</p></li>
                    <li><a href="#"><img src="img/slide4.jpg" alt="Slideshow Image 2" /> </a><p class="title" >عنوان مطلب چهارم</p></li>
                </ul>
            </div>
        </div>
    </body>
</html>

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

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

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

* {margin: 0; padding: 0;}
body {background:#fbfbfb;}
ul{
    list-style: none;
}
#wrapper {
   width:860px;
   margin: 20px auto;
  direction:rtl;
   font:11px Tahoma;
}
#slideshow {
    position:relative;
    width:610px;
    height:260px;
    margin: auto;
    box-shadow: 0px 0px 20px rgb(180,180,180);
}
#slideshow li {
    position:absolute;
    top:5px;
    right:5px;
    z-index:8;
    opacity:0.0;
    overflow: hidden;
}
#slideshow li.active {
    z-index:10;
    opacity:1.0;
}
#slideshow li.last-active {
    z-index:9;
}
.title{
    position: absolute;
    bottom: 0;
    width:100%;
    background-color:#000000;
    opacity: 0.6;
    height: 25px;
    z-index: 100;
    color:#FFF;
    font-size: 10pt;
    font-weight:bold;
    padding: 8px 5px 0 0;
}

تا قسمت 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 رو در نظر گرفتیم که استایلش مشخصه.

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

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

برای این کار یه تابع مینویسیم که وظیفه تغییر دادن تصاویر رو بر عهده داره .

function slideSwitch() {

    var active = $('#slideshow li.active');
    if (active.length == 0) active = $('#slideshow li:last-child');
    var next =  active.next().length ? active.next(): $('#slideshow li:first-child');
    active.addClass('last-active');
   $('.title').animate({bottom:'-30px'});
    next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            active.removeClass('active last-active');
        });
   $('.title').animate({bottom:'0'});     
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

اول از همه متغییر active رو تعریف کردیم و گفتیم که تگ li که دارای کلاس active هست رو داخلش قرار بده حالا میگیم اگه این متغییر active مقداری داشت که هیچی اگه نداشت آخرین تگ li رو براش ست کن خوب حالا متغییر next رو برای دریافت عنصر بعدی تعریف میکنیم و میگیم که اگه متغییر active دارای next بود (یعنی عنصری بعدش وجود داشت) براش ست کن  و اگر نبود این یعنی آخرین عنصره و باید اولین عنصر رو براش ست کنیم.

حالا چون قراره next رو نمایش بدیم پس برای عنصر فعلی کلاس last-active رو ست میکنیم و بعدشم اون تگ p رو با حالت انیمیشن میبریم پایین (با دادن مقدار منفی برای خاصیت bottom) حالا میام خاصیت‌های next رو برای حالت گذر (transition) ست میکنیم اولش مطمئن میشیم که opacity اون صفر باشه پس اینو براش ست میکنیم و بعدشم و بعدشم کلاس active رو بهش میدم تا به عنوان آیتم جاری شناخته بشه و بعدشم با یه انیمیشن opacity رو دوباره به مقدار نهایی می‌رسونیم.

در نهایت از عنصر جاری کلاس کلاس‌های active و last-active رو برمیداریم (کلاس active رو با عنصر active اشتباه نگیرین) و بعدشم دوباره اون عنصر p رو به حالت اولیه برمیگردونیم تا عنوان رو نشون بده در نهایت برای اجرای این تابع در قسمت اصلی یه تایمر تعریف میکنیم تا این تابع رو هر چند ثانیه دلخواه اجرا کنه.شاید بعضی قسمت‌ها برتوان گیج کننده باشه اما باید بدونید همه این تابع فقط در همون لحظه Transition انجام میشه،فکر کنم اینطوری بهتر بتونید بررسیش کنید.

دانلود فایل‌های نهایی اسلایدشو

چه امتیازی به این مقاله می دید؟
نویسنده کیوان علی محمدی
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

مرتضی

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

محمد بانشی

سلام.
دمو باز نمیشه.

farzaneh

صفحه دومش برای من نیومد!

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

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

لقمان آوند

اصلاح شد

as do

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

لقمان آوند

اصلاح شد

Mahdi

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

gtanori

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

nasrin rafati
 function slideShow(){
 var active = $(&#8216;#slideshow li.active&#8217;);
 if(active.lenght == 0) active = $(&#8216;#slideshow li:last-child&#8217;);
 var next = active.next().lenght ? active.next():$(&#8216;#slideshow li:first-child&#8217;);
 active.addClass(&#8216;last-active&#8217;);
 $(&#8216;.title&#8217;).animate({bottom:&#8217;-30px&#8217;});
 next.css({opacity : 0.0})
 .addClass(&#8216;active&#8217;)
 .animate({opacity:1.0},1000,function(){
       active.removeClass(&#8216;active last-active&#8217;);    
           });
 $(&#8216;.title&#8217;).animate({bottom:&#8217;0&#8242;});
 }
 $(function(){
 setInterval(&#8220;slideShow()&#8221;,5000);     
      });

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

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

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

mehrdad

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

با تشکر

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

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

a-m-m

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

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

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

majid zare

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

لقمان آوند

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

مریم

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

hasan2i2

عالی بود

abbas

ممنون ولی من پول ندارم و …

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :