آموزش ایجاد اسلایدشو در ۵ دقیقه با CSS و جی کوئری
آموزش ایجاد اسلایدشو در 5 دقیقه با CSS و جاوااسکریپت

آموزش ایجاد اسلایدشو در ۵ دقیقه با CSS و جی کوئری

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

برای مشاهده لینک وارد شود

HTML

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

<div id="slideshow">
        <div>
          <img src="../SlideShowIn5/img/1 (1).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (2).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (3).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (4).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (5).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (6).jpg" alt="BNP" width="500px" height="500px">
        </div>
        <div>
          <img src="../SlideShowIn5/img/1 (7).jpg" alt="BNP" width="500px" height="500px">
        </div>
      </div>

ما به دلخواه برای هر یک از تصاویر خود طول و عرض را برابر با ۵۰۰ پیکسل قرار داده ایم.ما برای اعمال استایل هم به تگ اصلی ID خاصی را تعریف می کنیم که در بخش مربوط به استایل از آن برای تعیین استایل اسلایدشو خود استفاده خواهیم کرد.

CSS

در بخش مربوط به استایل ما  بخش قابل توضیح  زیادی نداریم ولی ما بخش های مهم را برایتان در زیر آورده ایم.

#slideshow{
    margin:50px auto;
    position:relative;
    width:500px;
    height:500px;
    padding:10px;
    box-shadow:0 0 50px rgba(0,0,0,0.4)
}

#slideshow > div{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
}

ما در بالا تنظیمات مربوط به محل قرار گیری تصاویر را تعیین می کنیم که به دلیل سادگی نیازی به توضیح ندارند.

جی کوئری

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

توسط کد زیر انجام می پذیرد.

//تابع اجرای نمایش تصاویر
          $(function() {

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

            setInterval(function() {
              $('#slideshow > div:first')
                .fadeOut(3000)
                .next()
                .fadeIn(3000)
                .end()
                .appendTo('#slideshow');
            },  ۳۰۰۰);

          });

ما در ابتدا تمام تگ های مربوط به تصاویر را مخفی می کنیم تا همگی نمایش داده نشوند،سپس با استفاده از یک تابع از اولین تگ شروع به نمایش تصاویر با افکت مربوطه با زمان تاخیر ۳ ثانیه می کنیم.همین!

ما برای استفاده از افکت های بالا از تابع جی کوئری jquery.min استفاده کرده ایم.

پایان

 

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

یک دیدگاه

  1. سلام
    چطوری میشه یه روالی رو ایجاد کرد که پس ورود داده های دیگر طبق همین روال کار کنن؟!؟!؟!؟!؟

    مثلا یه قالب و جدول برای یک عکس طراحی کنید و پس از آن طبق همان برای تمامی عکس های ورودی عمل کند و نمایش دهد طوری که قالب خراب نشود!

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


چهار × 1 =