최신 웹 개발 튜토리얼
 

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";
}
»그에게 자신을보십시오

자바 스크립트는 설명

첫째, 1로 slideIndex 설정 (첫 번째 사진)

그런 다음 첫 번째 이미지를 표시 () showDivs를 호출합니다.

사용자가 클릭하면 버튼 중 하나) (plusDivs를 호출합니다.

plusDivs () 함수는 하나를 또는 slideIndex에 하나를 추가합니다.

showDiv () 함수 가죽 (디스플레이 = "없음") 클래스 이름 "mySlides"모든 요소 및 디스플레이 (디스플레이 = "블록") 지정된 slideIndex와 요소입니다.

slideIndex 요소 (x.length)의 수보다 높은 경우 slideIndex는 0으로 설정된다.

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

가 lorem ipsum의

슬라이드 2

가 lorem ipsum의

슬라이드 3

가 lorem ipsum의

<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 - 디스플레이 - * 클래스와 각 이미지 슬라이드에 대한 캡션 텍스트를 추가 (좌상, 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">
»그에게 자신을보십시오