أحدث البرامج التعليمية وتطوير الشبكة
 

W3.CSS عرض الشرائح

❮ السابق التالي الفصل ❯
❮ ❯

عرض اليدوي

عرض عرض الشرائح اليدوي مع W3.CSS من السهل جدا.

مجرد خلق العديد من العناصر التي لها نفس اسم الفئة:

مثال

<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" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">&#10095;</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 () ينقص واحد أو يضيف واحدة إلى slideIndex.

وshowDiv () الجلود وظيفة (عرض = "لا شيء") كل العناصر مع اسم الفئة "mySlides"، ويعرض (عرض = "كتلة") عنصر مع slideIndex معين.

إذا كان slideIndex أعلى من عدد من العناصر (x.length)، يتم تعيين slideIndex إلى الصفر.

إذا كان slideIndex أقل من 1 يتم تعيين إلى عدد من العناصر (x.length).

عرض تلقائي

لعرض الشرائح التلقائي هو أبسط.

ما عليك سوى تشغيل الجافا مختلفة قليلا:

مثال

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:

شريحة 1

أبجد هوز

الشريحة 2

أبجد هوز

شريحة 3

أبجد هوز

مثال

<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>
انها محاولة لنفسك »

عرض الشرائح التوضيحية

Trolltunga، النرويج
الشفق القطبي الشمالي، النرويج
جبال جميلة
الغابات المطيرة
الجبال!
❮ ❯

إضافة نص التعليق لكل شريحة صورة مع الطبقات * W3-عرض- (topleft، topright، bottomleft، bottomright أو وسط):

مثال

<div class="w3-display-container mySlides">
  <img src="img_fjords.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-hor-16 w3-black">
    Trolltunga, Norway
  </div>
</div>
انها محاولة لنفسك »

مؤشرات الشرائح

مثال باستخدام أزرار للإشارة إلى عدد الشرائح هناك في عرض الشرائح، والتي تنزلق كان المستخدم يستعرض حاليا.

مثال

<div class="w3-center">
  <button class="w3-btn" onclick="plusDivs(-1)">&#10094; Prev</button>
  <button class="w3-btn" onclick="plusDivs(1)">Next &#10095;</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-bottomleft" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</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-border w3-hover-shadow"
      src="img_nature_wide.jpg" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_fjords_wide.jpg" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_mountains_wide.jpg" onclick="currentDiv(3)">
    </div>
  </div>
</div>
انها محاولة لنفسك »

الشرائح المتحركة

مثال

<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">
انها محاولة لنفسك »

تلاشى الرسوم المتحركة

مثال

<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">
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯