자바 스크립트 슬라이드 쇼 - jaba seukeulibteu seullaideu syo

Question

javascript 코드

const myImg = ["my1.jpg","my2.jpg","my3.jpg","my4.jpg","my5.jpg","my6.jpg","my7.jpg","my8.jpg","my9.jpg","my10.jpg"];
const imgPlace = document.querySelector(".my-img") // html에서 이미지 넣을 위치 가져오기 
let currentIndex = 0; //접근할 인덱스 번호 (이 값을 함수안에다 넣으면 실행될때마다 0으로 초기화 되므로 밖으로 뺀다.)

function imgPick(){
    if(currentIndex<myImg.length-1){ 
    imgPlace.src = `images/my/${myImg[currentIndex]}`;
    currentIndex++;
    }else{
        imgPlace.src = `images/my/${myImg[currentIndex]}`;
        currentIndex = 0;   
    }
}
imgPick(); //처음에 먼저 한번 실행하고
setInterval(imgPick,3500); // 3.5초마다 반복실행

_위코드는 접근할 인덱스 번호를 전역변수로 선언하였다.
접근할 인덱스 번호는 일단 imgPick 함수내에서만 사용할 함수이다.
전역변수로 선언했으니 다른 함수를 추가했을 때 실수로 이에 접근할 수가 있는데
이를 방지하기위해 클로저 표현을 사용하였다.

클로저

const myImg = ["my1.jpg","my2.jpg","my3.jpg","my4.jpg","my5.jpg","my6.jpg","my7.jpg","my8.jpg","my9.jpg","my10.jpg"];
const imgPlace = document.querySelector(".my-img")

//클로저
function makeCounter(){
    let currentIndex = 0;

    return function () {
        if(currentIndex == myImg.length-1){
           return currentIndex = 0;
       }
        return ++currentIndex;
       
    };
    
}
let counterIndex = makeCounter();

function imgPick(){    
    imgPlace.src = `images/my/${myImg[counterIndex()]}`;
}
imgPick();
setInterval(imgPick,3500);

이렇게 쓰면 전역에 선언할 때 불가피한 다른 코드의 접근을 피할수 있다.

w3schools의 JavaScript How To 예제 중 슬라이더를 만들어보겠습니다.

https://www.w3schools.com/howto/howto_js_slideshow.asp

Example 1. Slideshow 뼈대잡기 (Feat.HTML)

슬라이더에 보여주고싶은 내용 : 페이지 표기 / 이미지 파일 / 이미지 설명글

위 내용은 캡쳐에 표시한 <div class="mySlides fade"> ~ </div> 까지이며 슬라이드를 세개 만들어줄 것이기 때문에 <div class="mySlides fade">를 세개 작성하였다.

Example2. CSS 요소 추가

<head> 태그 내에 <style> 태그를 생성하고 <style> 태그 내에 사이트에 작성된 내용을 그대로 복사하였습니다.

(Example 1에서 만들어둔 이미지 파일이 사라지고 dot 세개만 보여지지만, 당황하지않아도 됩니다.)

Example3. JavaScript 추가하기

Example 1에서 작성하였던 html코드 하단의 <script> 태그를 생성하고 <script>태그 내에 사이트에 작성된 내용을 복사하여 넣어줍니다.

slider.txt

0.00MB

JavaScript에서의 주석

1. 한줄주석(// 주석)

: 위 예제에서 이용한 형태, 한줄 주석은 ( // ) 뒤의 내용을 주석으로 판단한다.

때문에 // 앞쪽의 코드는 정상 실행되며 그 뒤에 주석이 있으면 실행하지않고 다음줄로 넘어간다.

2. 여러줄 주석(/* 123456 주석처리 */)

: /* 와 */ 사이에 있는 모든 내용, 여러 줄에대하여 주석처리 할 수 있다.

JavaScript DIV 보이기 / 숨기기 할때

document.getElementByID("test").style.display = "none"; //숨기기

document.getElementByID("test").style.display = "block"; //보이기

</script>

HTML / 좌우 화면전환을 위한 화살표 표시할때 특수문자 기호 이용

&#10094 : < 표시

&#10095 : > 표시

JavaScript 코드 분석

위 예제에서는 총 세개의 함수가 실행되고 있는데 각각 나누어서 분석해봅시다.

1.

var slideIndex = 1; // slideindex라는 변수를 생성
showSlides(slideIndex); //showSlides라는 함수에서 slideindex 변수를 이용하도록 예정

function showSlides(n) {    //showSlides 함수 생성(n = slideindex)
var i;                       // i 변수 생성
var slides = document.getElementsByClassName("mySlides"); // 문서 전체내에서 class 이름이 mySlides인 요소 지정
var dots = document.getElementsByClassName("dot");         // 문서 전체내에서 class 이름이 dot인 요소 지정
if (n > slides.length) {slideIndex = 1} // 변수 n(slideindex)이 slides의 전체 개수보다 크면 slideindex의 값을 1로 바꿈.

(여기서 slides은 class name:mySlides인 요소를 가리킴)
if (n < 1) {slideIndex = slides.length} //변수 n(slideindex)가 1보다 작으면 slideindex의 값을 slides.length로 바꿈.

                                           (slide.length은 slide의 전체 개수를 의미. 위 예시의 경우 값은 slide의 총 개수인 3임.)
for (i = 0; i < slides.length; i++) {  //변수 i의 초기값은 0, 1씩 증감됨. i가 slide.length보다 작으면 중괄호 내 코드 실행.
       slides[i].style.display = "none"; //style.display="none" 은 화면에서 안보이도록 설정하는 코드
}
for (i = 0; i < dots.length; i++) { //변수 i의 초기값은 0, 1씩 증감됨. i가 dots.length보다 작으면 중괄호 내 코드 실행.
       dots[i].className = dots[i].className.replace(" active", ""); //dot class 이름을 "active"에서 ""으로 변경.
}
slides[slideIndex-1].style.display = "block"; // slides 변수의 slideindex-1 번째 데이터가 보이도록 설정

// slideindex-1을 하는 이유 : slideindex가 1인 데이터는 slides[0]에 저장되어있기 때문

dots[slideIndex-1].className += " active"; // slides 변수의 slideindex-1 번째 classname에 'active' 추가

//CSS코드 내 클래스 active dot에 대해 별도 style 지정되어있음.

실행중인 slideindex에만 style 적용하기 위해 active 추가함.

}

2. 좌우 화살표 클릭하여 화면전환하는 기능.

<a class="prev" onclick="plusSlides(-1)">❮</a> // 좌측 a 태그 생성 : 클래스 이름 prev, < 기호 표시

클릭 시 plusSlides(-1) 함수 호출함.

<a class="next" onclick="plusSlides(1)">❮</a> // 우측 a 태그 생성 : 클래스 이름 next, > 기호 표시

클릭 시 plusSlides(1) 함수 호출함.

... (중략)

function plusSlides(n) {                                          // plusSlides(n) 함수 생성
showSlides(slideIndex += n);                                  //  showSlides(slideindex에 n을 더한 값) 실행
}                                                  prev 클릭 시 -1, next 클릭 시 +1 slideindex 값을 수정하여 화면 전환함.

</script>

3. 하단의 점 클릭 시 해당하는 화면으로 전환되는 기능

<div style="text-align:center"> //dot 세개를 넣어줄 div 공간 생성

<span class="dot" onclick="currentSlide(1)"></span> //span 요소를 class 이름 dot로 생성.

<span class="dot" onclick="currentSlide(2)"></span> 각각 클릭 시 currentSlide()함수를 호출함.

</div>

function currentSlide(n) { //curentSlide(n) 함수 생성
showSlides(slideIndex = n); //showSlides(slideindex값을 n으로 대입) 함수 실행
}

</script>

자바스크립트 슬라이드 효과 자바스크립트 좌우 슬라이드 자바스크립트 세로 슬라이드 자바스크립트 슬라이드 배너 HTML 슬라이드 페이지 html 이미지 슬라이드쇼