سبد (0)

اسلایدشو واکنشگرا

اسلاید شو دستی

نمایش یک اسلاید شو دستی با w3.CSS بسیار ساده است.

ابتدا فقط کافی است تگهای img را با یک نام کلاس یکسان، تنظیم نمایید:

مثال

<img class="mySlides" src="/img_fjords.jpg">
<img class="mySlides" src="/img_lights.jpg">
<img class="mySlides" src="/img_mountains.jpg">
<img class="mySlides" src="/img_forest.jpg">

و سپس دو دکمه برای پیمایش تصاویر:

مثال

<a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(+1)">❯</a>

افزودن قطعه کد جاوااسکریپت برای انتخاب تصاویر:

مثال

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
}

خودتان امتحان کنيد »

توضیح جاوااسکریپت بالا:

در ابتدا متغییر slideIndex را با مقدار 1 تنظیم نمایید.

سپس ()showDivs را برای نمایش تصویر اول فراخوانی کنید.

زمانی که کاربر روی یکی از دکمه ها کلیک کرد ،plusDivs را فراخوانی کنید.

تابع ()plusDivs شماره ایندکس را یک واحد کم یا زیاد میکند.

تابع () showDivهمه عناصر با نام کلاس "mySlides" را مخفی میکند (display="none") و عناصر با شماره اسلاید داده شده را نمایش میدهد(display="block").

اگر شماره اسلایدبزرگتر از عناصر بود (x.lenght ) ،شماره اسلاید برابر با 0 خواهدشد.

اگر شماره اسلاید کوچکتر از 1 بود ،شماره اسلاید برابر تعداد عناصر (x.lenght ) می شود.

اسلاید شو اتوماتیک

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

شما به مقداری جاوااسکریپت متفاوت نیاز دارید:

مثال

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

خودتان امتحان کنيد »

اسلایدهای HTML

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

آنها همچنین میتوانند محتوای HTML باشند:

مثال

<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>

خودتان امتحان کنيد »

توصیف ها در اسلاید شو

برای هر اسلاید میتوانیم از یک توضیح یا توصیف استفاده کنیم، که توضیح مورد نظر می تواند درباره اسلاید جاری باشد. بنابراین برای اضافه کردن توصیف میتوانید برای هر اسلاید، یک div با کلاس *-w3-display استفاده نمایید:

(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or middle):

مثال

<div class="w3-display-container mySlides">
<img src="/img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
Trolltunga, Norway
</div>
</div>

خودتان امتحان کنيد »

مشخص کننده های اسلاید شو

یک مثال از استفاده دکمه برای مشخص کردن اینکه چه تعداد اسلاید در یک اسلاید شو وجود داردو کاربر کدام اسلاید را در حال حاضر میبیند.

مثال

<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next ❯</button>

<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>

خودتان امتحان کنيد »

مثال

<div class="w3-content w3-display-container">
<img class="mySlides" src="/img_nature.jpg">
<img class="mySlides" src="/img_fjords.jpg">
<img class="mySlides" src="/img_mountains.jpg">
<div class="w3-center w3-display-bottommiddle" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right" onclick="plusDivs(1)">❯</div>
    <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>

خودتان امتحان کنيد »

تصاویر مانندمشخص کننده ها

یک مثال از استفاده از تصاویر به عنوان مشخص کننده ها:

مثال

<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="/img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="/img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="/img_mountains_wide.jpg" style="width:100%">

<div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity"
      src="/img_nature_wide.jpg" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity"
      src="/img_fjords_wide.jpg" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity"
      src="/img_mountains_wide.jpg" onclick="currentDiv(3)">
    </div>
</div>
</div>

خودتان امتحان کنيد »

اسلاید های متحرک شده

از کلاس های *-w3-animate برای حرکت کشویی یا محو شدن یک عنصر از بالا،پایین ،چپ یا راست نمایشگر استفاده میشوند:

مثال

<img class="mySlides w3-animate-top" src="/img_01.jpg">
<img class="mySlides w3-animate-bottom" src="/img_02.jpg">
<img class="mySlides w3-animate-top" src="/img_03.jpg">
<img class="mySlides w3-animate-bottom" src="/img_04.jpg">

خودتان امتحان کنيد »

انیمیشن های محو شونده

کلاس w3-animate-fading یک عنصر را محو و پدیدار میکند(10 ثانیه زمان میبرد)

مثال

<img class="mySlides w3-animate-fading" src="/img_01.jpg">
<img class="mySlides w3-animate-fading" src="/img_02.jpg">
<img class="mySlides w3-animate-fading" src="/img_03.jpg">
<img class="mySlides w3-animate-fading" src="/img_04.jpg">

خودتان امتحان کنيد »

: نوشته شده توسط زهرا داوودی; بازدید: 4618

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی

پرداخت آنلاین - بانک ملت