? ????? HTML, CSS ? JavaScript? ???? ????? ???? ???? ? ? ???? ?? ??? ???? ??? ?????. ???? ??? ? ???? ????? ??? ?? CSS ???? ???? ???? ????? ??? ?? ????. ? ???? ? ??? ?? ???? ? ??? ?? ??? ?? ??? ??? ??? ???? ????.

1. HTML ??

?? ?????? ???? HTML ??? ?????. ? ?????? div? ?? ????? mySlides? ?? ??? ??? ??? ??? ???.

 <div>
  <div class="mySlides" style="display: block;">
    
      <div class="numbertext">1/6</div>
      <img  src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy"   style="max-width:90%" alt="HTML/JavaScript? ???? ?????? ???? ?? ??" >
      <div class="text">?? 1</div>
    
  </div>
  <div class="mySlides" style="display: none;">
    
      <div class="numbertext">2/6</div>
      <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="HTML/JavaScript? ???? ?????? ???? ?? ??" >
      <div class="text">?? 2</div>
    
  </div>
  <!-- ?? ???? -->
</div>

2. CSS ???

???? CSS ???? ???? ????? ??? ?????? ?????. ??? ???? ? ? ???? ?? ?????? ???? ?? ????? ???? ????.

 .mySlides {
  ?????: ??; /* ?? ????? ?? ????? ???? */
}

.????? {
  ?????: ??? ???? ? 0.5? ??? ??? ? ??; /* ????? ????*/
}

.?????? {
  ?????: ???? ??-?? 0.5? ?? ? ?? ???; /* ???? ???? ??*/
}

@keyframes ??? ???? {
  0% {
    ??: ??X(100%);
    ????: 0;
  }
  100% {
    ??: ??X(0);
    ????: 1;
  }
}

@keyframes ???? ??-?? {
  0% {
    ??: ??X(0);
    ????: 1;
  }
  100% {
    ??: ??X(-100%);
    ????: 0;
  }
}

????:

• .mySlides? ?? ??? ??: ???? ???? ????? ?? ????? ?????.
• .slide-in ? .slide-out? ?? ????? ? ?????? ?????? ?????. ?? ???? ?????? ??? ??? ??? ?? ??? ????? ?????.
• @keyframes? ?????? ?? ????? ?????. ???? ? ???? ????? ??? ??????, ???? ?? ??? ???? ??? ???????. ??? ?? ????? ??? ??? ??? ? ????.

3. ?????? ??

?? JavaScript? ???? ???? ??? ?????? ?????. ? ????? ??? ?? ????? ???? ????, ?? ????? ?? ?? ?????? ???? ????? showSlides ??? ???? ???.

 SlideIndex = 0?? ?????.
?????();

?? showSlides() {
  ?? ??;
  ???? = document.getElementsByClassName("mySlides");
  for (i = 0; i  { // ?????? ??? ?? ????? ??? ?????. Slides[i].style.display = "none";
      Slides[i].classList.remove("???? ??"); // ?????? ??? ? ???? ?? ???? ?????}, 500); // ?? ??? CSS ????? ??? ?????.}
  ???????;
  if (slideIndex > Slides.length) {slideIndex = 1}
  ????[slideIndex-1].style.display = "??";
  Slides[slideIndex-1].classList.remove("slide-out"); // ???? ?? ??? ?? Slides[slideIndex-1].classList.add("slide-in"); // ????? ??? ?? setTimeout(showSlides, 3000); // 3??? ??? ??
}

?? ??:

1. showSlides() ??:

   • ?? ?? mySlides ??? ?????.
   • ?? ????? ???? ????? ???? ??? ?? ?????? ???? ?????.
   • setTimeout ??? ???? ???? ??? ??? ????, ??? ?? ???? ?? ????? ??? ?????? ?????. ?? ??? CSS ?????? ?? ??? ???? ???.
   • ?? ?? ?? ????? ???? ???? ?? ???? ??? ?? ???? ? ???? ???? ???????.
   • ????? setTimeout ??? ???? ???? ???? ????? showSlides() ??? ???? ?? ??? ?????.

2. ?? ??? ?? ??:

   • element.classList.add("className"): ??? CSS ??? ??? ??? ?????.
   • element.classList.remove("className"): ???? ??? CSS ??? ??? ?????.

??? ?:

 



* {?? ??: ??? ??}
body {?? ??: Verdana, sans-serif; ??:0}
.mySlides {??: ??}
img {?? ??: ??;}

/* ????? ???? */
.?????-???? {
  ?? ??: 1000px;
  ??: ??;
  ??: ??;
}

/* ?? ? ?? ?? */
.prev, .next {
  ??: ???;
  ??: ??;
  ??: 50%;
  ??: ??;
  ??: 16px;
  ?? ??: -22px;
  ??: ??;
  ?? ??: ??;
  ?? ??: 18px;
  ??: 0.6? ???;
  ??? ??: 0 3px 3px 0;
  ??? ??: ??;
}

/* "?? ??"? ???? ?? */
.?? {
  ???: 0;
  ??? ??: 3px 0 0 3px;
}

/* ???? ??? ?? ??? ??? ???? ????? */
.prev:??, .next:?? {
  ???: rgba(0,0,0,0.8);
}

/* ?? ??? */
.??? {
  ??: #f2f2f2;
  ?? ??: 15px;
  ??: 8px 12px;
  ??: ??;
  ??: 8px;
  ??: 100%;
  ??? ??: ??;
}

/* ?? ???(1/3 ?) */
.????? {
  ??: #f2f2f2;
  ?? ??: 12px;
  ??: 8px 12px;
  ??: ??;
  ??: 0;
}

/* ?/??? */
.? {
  ??: ???;
  ??: 15px;
  ??: 15px;
  ??: 0 2px;
  ???: #bbb;
  ??? ??: 50%;
  ?????: ??? ??;
  ??: ??? 0.6? ???;
}

.active, .dot:hover {
  ???: #717171;
}

/* ??? ????? */
.????? {
  ?????: ??? ???? ? 0.5? ??? ??? ? ??;
}

.?????? {
  ?????: ???? ??-?? 0.5? ?? ? ?? ???;
}

@keyframes ??? ???? {
  0% {
    ??: ??X(100%);
    ????: 0;
  }
  100% {
    ??: ??X(0);
    ????: 1;
  }
}

@keyframes ???? ??-?? {
  0% {
    ??: ??X(0);
    ????: 1;
  }
  100% {
    ??: ??X(-100%);
    ????: 0;
  }
}

/* ?? ????? ??? ??? ???? */
@media ?? ?? ? (?? ??: 300px) {
  .prev, .next, .text {?? ??: 11px}
}




<div>

<div>
  <div class="numbertext">1/3</div>
  <img  src="/static/imghw/default1.png" data-src="img1.jpg" class="lazy" alt="HTML/JavaScript? ???? ?????? ???? ?? ??" >
  <div class="text">?? ???</div>
</div>

<div>
  <div class="numbertext">2/3</div>
  <img  src="/static/imghw/default1.png" data-src="img2.jpg" class="lazy" alt="HTML/JavaScript? ???? ?????? ???? ?? ??" >
  <div class="text">?? 2</div>
</div>

<div>
  <div class="numbertext">3 / 3</div>
  <img  src="/static/imghw/default1.png" data-src="img3.jpg" class="lazy" alt="HTML/JavaScript? ???? ?????? ???? ?? ??" >
  <div class="text">?? 3</div>
</div>

<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>


SlideIndex = 0?? ?????.
?????();

?? showSlides() {
  ?? ??;
  ???? = document.getElementsByClassName("mySlides");
  for (i = 0; i  {
      ????[i].style.display = "??";
      Slides[i].classList.remove("???? ??");
    }, 500);
  }
  ???????;
  if (slideIndex > Slides.length) {slideIndex = 1}
  ????[slideIndex-1].style.display = "??";
  Slides[slideIndex-1].classList.remove("slide-out");
  ????[slideIndex-1].classList.add("?????");
  setTimeout(showSlides, 3000); // 3??? ??? ??
}

? ??? HTML/JavaScript? ???? ?????? ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!