여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 슬라이드쇼
w3.css – 슬라이드쇼
2개월전 작성
3개월전 수정

w3.css

슬라이드쇼

슬라이드쇼를 만드는 방법에 대해 알아보자.

수동 슬라이드쇼

W3.CSS를 사용하여 수동 슬라이드쇼를 표시하는 것은 매우 쉽다.

동일한 클래스 이름을 가진 많은 요소를 생성하자.

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

이미지를 스크롤하는 두 개의 버튼

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

그리고 이미지를 선택하려면 JavaScript를 추가한다.

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"인 모든 요소를 ​​숨기고(display="none") 주어진 SlideIndex를 가진 요소를 표시(display="block")한다.

SlideIndex가 요소 수(x.length)보다 큰 경우 SlideIndex는 0으로 설정된다.

SlideIndex가 1 보다 작으면 요소 수(x.length)로 설정된다.

자동 슬라이드쇼

자동 슬라이드쇼를 표시하는 방법은 더욱 간단하다.

약간 다른 JavaScript만 필요하다.

예제
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-* 클래스(왼쪽 상단, 상단 중간, 상단 오른쪽, 하단 왼쪽, 하단 중간, 하단 오른쪽, 왼쪽, 오른쪽 또는 중간)를 사용하여 각 이미지 슬라이드에 캡션 텍스트를 추가한다.

예제
<div class="w3-display-container mySlides">
  <img src="img_snowtops.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
    French Alps
  </div>
</div>
기본 예시
예제 보기

슬라이드쇼 표시기

슬라이드쇼에 있는 슬라이드 수와 사용자가 현재 보고 있는 슬라이드를 나타내는 버튼을 사용하는 예이다.

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

  <button class="w3-button demo" onclick="currentDiv(1)">1</button>
  <button class="w3-button demo" onclick="currentDiv(2)">2</button>
  <button class="w3-button 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_snowtops.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_snow_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"
      style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_snow_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_mountains_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(3)">
    </div>
  </div>
</div>
기본 예시
예제 보기

같은 페이지에 여러 슬라이드쇼 표시

한 페이지에서 여러 슬라이드쇼를 운영하려면 각 슬라이드쇼 그룹의 구성원을 서로 다른 클래스로 분류해야 한다.

예제
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>

<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</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">
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그