راهنمای ویدیویی ساخت اتو اسلاید شو ساده با جی کوئری

علیرضا حاتمی نیا 3490

jquery auto slideshow

سلام عرض می کنم خدمت شما علاقه مند به آموزش برنامه نویسی و آموزش ویژه وبسایت ilikephp

مقدمه:

امروز با آموزش ویژه ساخت اتو اسلایدشو توسط جی کوئری در خدمت شما هستم. این آموزش به صورت متنی و ویدویی در اختیار شما قرار داده شده است. فیلم این آموزش را در انتهای مطلب می توانید مشاهده کنید. همچنین کدهای مربوط به این آموزش نیز در ادامه قابل دانلود می باشد. فقط پیشنهاد می کنم متن آموزش را با دقت بخوانید.

پیش نیازها جهت ساخت اتو اسلاید شو

برای یادگیری این مبحث لازم است تا آشنایی مقدماتی با مفاهیم زیر داشته باشید:

ساخت گالری تصاویر در HTML و CSS

اسلاید شو خود کار یا اتو اسلایدشو به گالری از تصاویر گفته می شود که به صورت خودکار در بازه زمانی مشخص تغییر می کند و تصاویر را به نوبت نمایش می دهد. در این آموزش 3 تصویر به طول و عرض ثابت (در این مثال 300 در 300) اتخاب می کنیم و هر تصویر را در تگ <div> جداگانه ای قرار می گیرند و کل تگ ها داخل یک تگ <div> با مشخصه id=slide قرار می گیرند.

HTML

<div id="slide">
   <div>
      <img src="img/01.jpg">
   </div>
   <div>
      <img src="img/02.jpg">
   </div>
   <div>
      <img src="img/03.jpg">
   </div>
</div>

حالا توسط CSS استیل ها و ویژگی های تگ ها را مشخص می کنیم. تگ با مشخصه slide به عنوان تگ پدر دارای position=relative می باشد و تگ های <div> فرزندش دارای position=absolute هستند و همچنین از چهار جهت اندازه ای یکسان به آن ها می دهیم تا تصاویر دقیق روی هم قرار بگیرند.

#slide {
   position: relative;
   width: 500px;
   height: 500px;
   border: 1p solid red;
}
#slide > div {
   position: absolute;
   top: 10;
   right: 10;
   bottom: 10;
   left: 10;
}

مدیریت اسلایدشو در جی کوئری

بسیار خب حالا برای مدیریت اسلایدشو از جی کوئری کمک می گیریم. قصد داریم تا تصاویر به مدت 3 ثانیه با فاصله از هم و توسط افکت fade پنهان و نمایان شوند.
پس ابتدا تمامی تصاویر به جز تصویر اول را توسط جی کوئری و با متد hide مخفی می کنیم: 

$("#slide div:gt(0)").hide();

حالا به این صورت و با استفاده از تابع  setInterval تصاویری را یکی پس از دیگری fadeout و fadeIn می کنیم.

setInterval(function() {
         $('#slide > div:first')
              .fadeOut(1000)
              .next()
              .fadeIn(1000)
              .end()
              .appendTo("#slide");
     }, 3000);

توجه داشته باشید که ابتدا اولین فرزند <div> مشخصه slide را انتخاب کردیم. سپس آن را توسط fadeout پنهان کردیم. و سپس توسط متد next فرزندی بعدی که مخفی بود را توسط متد fadeIn نمایان می کنیم. سپس توسط متد end مجدد به اولین فرزند را انتخاب می کنیم (که همان اولین تگ <div> است) و آن را به آخر slide توسط appendTo اضافه می کنیم. با این کار تصویر دوم که نمایان است حالا به عنوان اولین فرزند در نظر گرفته می شود و این روند همین طور ادامه پیدا می کند.

دانلود فایل ها

 

 

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت