SoloLearn JS 번역

Image Slider

이미지 슬라이더

• Now we can create a sample image slider project.
  • 이제 이미지 슬라이더 프로젝트를 생성할 수 있다.
• The images will be changed using “Next” and “Prev” buttons.
  • “Next”와 “Prev” 버튼을 사용해서 이미지가 변경된다.
• Now, let’s create our HTML, which includes an image and the two navigation buttons:
  • 하나의 이미지와 두 개의 네비게이션 버튼을 포함하는 HTML을 작성해보자.

<div>
   <button>Prev</button>
   <img id="slider" src="https://www.sololearn.com/uploads/slider/1.jpg" width="200px" height="100px">
   <button>Next</button>
</div>

코드 실행 확인

• Next, let’s define our sample images in an array:
  • 이미지를 배열로 정의해보자.

var images = [
   "https://www.sololearn.com/uploads/slider/1.jpg",
   "https://www.sololearn.com/uploads/slider/2.jpg",
   "https://www.sololearn.com/uploads/slider/3.jpg"
];

• Now we need to handle the Next and Prev button clicks and call the corresponding functions to change the image.
  • 이제 Next와 Prev 버튼을 처리하고, 해당 함수를 호출해서 이미지를 변경해야 한다.

• HTML:

<div>
   <button onclick="prev()">Prev</button>
   <img id="slider" src="https://www.sololearn.com/uploads/slider/1.jpg" width="200px" height="100px">
   <button onclick="next()">Next</button>
</div>

• JS:

var images = [
   "https://www.sololearn.com/uploads/slider/1.jpg",
   "https://www.sololearn.com/uploads/slider/2.jpg",
   "https://www.sololearn.com/uploads/slider/3.jpg"
];

var num = 0;

function next() {
   var slider = document.getElementById('slider');
   num++;
   
   if (num >= images.length) {
      num = 0;
   }
   slider.src = images[num];
}

function prev() {
   var slider = document.getElementById('slider');
   num--;
   
   if (num < 0) {
      num = images.length - 1;
   }
   slider.src = images[num];
}

코드 실행 확인

• The num variable holds the current image.
  • num 변수는 현재 이미지를 유지한다.

QUIZ

• What will be the content of the paragraph after the user clicks on it twice?
  • 사용자가 두 번 클릭한 후 p의 내용은 무엇이 되는가?

<p id="txt" onclick="test()">20</p>

<script>
   function test() {
      var x = document.getElementById('txt');
      var n = x.innerHTML;
      x.innerHTML = n / 2;
   }
</script>

5