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초마다 반복실행javascript 코드
_위코드는 접근할 인덱스 번호를 전역변수로 선언하였다.
접근할 인덱스 번호는 일단 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 예제 중 슬라이더를 만들어보겠습니다.
//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 보이기 / 숨기기 할때
<script>
document.getElementByID("test").style.display = "none"; //숨기기
document.getElementByID("test").style.display = "block"; //보이기
</script>
HTML / 좌우 화면전환을 위한 화살표 표시할때 특수문자 기호 이용
❮ : < 표시
❯ : > 표시
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. 좌우 화살표 클릭하여 화면전환하는 기능.
<!-- Next and previousbuttons -->
<a class="prev" title="plusSlides(-1)">❮</a> // 좌측 a 태그 생성 : 클래스 이름 prev, < 기호 표시
클릭 시 plusSlides(-1) 함수 호출함.
<a class="next" title="plusSlides(1)">❮</a> // 우측 a 태그 생성 : 클래스 이름 next, > 기호 표시
클릭 시 plusSlides(1) 함수 호출함.
... (중략)
<script>
function plusSlides(n) { // plusSlides(n) 함수 생성
showSlides(slideIndex += n);
// showSlides(slideindex에 n을 더한 값) 실행
} prev 클릭 시 -1, next 클릭 시 +1 slideindex 값을 수정하여 화면 전환함.
</script>
3. 하단의 점 클릭 시 해당하는 화면으로 전환되는 기능
<!-- The dots/circles -->
<div style="text-align:center"> //dot 세개를 넣어줄 div 공간 생성
<span class="dot" title="currentSlide(1)"></span> //span 요소를 class 이름 dot로 생성.
<span class="dot" title="currentSlide(2)"></span> 각각 클릭 시 currentSlide()함수를 호출함.
<span class="dot" title="currentSlide(3)"></span>
</div>
<script>
function currentSlide(n) { //curentSlide(n)
함수 생성
showSlides(slideIndex = n); //showSlides(slideindex값을 n으로 대입) 함수 실행
}
</script>