이미지 슬라이더 / 자바스크립트 + 제이쿼리
페이지 정보
관련링크
http://webnmall.com/_practice/wd/slideEx.html
본문
이미지 슬라이더 / 자바스크립트 + 제이쿼리
웹디자인 기능사 실기 시험 문제에서 핵심은 이미지 슬라이더와 메뉴입니다.
그 이미지 슬라이더 소스를 공개합니다.
일반적으로 실무에서는 이미지 슬라이더의 경우 기존의 유명한 플러그인을 사용하는 경우가 대부분입니다만 그 플러그인 들은 일반적으로 무겁습니다.
특별히 가벼운 소스로 만들어진 슬라이더를 사용할 필요가 있다면 아래의 소스를 그대로 사용하는 것도 나쁘지 않습니다.
(정말 간단한 소스지만 그래도 사용하실 때는 출처를 밝혀주시기를 부탁드립니다)
1. 왼쪽으로 흘러가는 슬라이더
- 자바스크립트와 제이쿼리를 혼용했습니다. 일반적으로 그렇게 많이 사용합니다.
- 자바스크립트의 내장함수 setInterval()를 이용해서 타이밍을 조절합니다.
setInterval(slide, 3000) ; // slide() 함수를 3000 마다 실행한다 (여기서 숫자 3000은 3초입니다. 1000은 1초 5000은 5초...)
- slide() 함수를 보면 함수 내에 다시 slideNext() 함수를 호출합니다.
- slide() 함수는 슬라이드 효과를 내주는 함수이고
- slideNext() 함수는 이미지 슬라이드가 무한 반복될 수 있도록 현재 가장 앞에 있는 이미지를 뒤로 돌려주는 효과를 내주는 함수입니다.
* 사실 실제 코딩은 일반적으로 다음과 같이 작성하지만 학습자들의 이해를 돕기 위해 분리해서 코딩했습니다.
예) setInterval(function(){
$('#slider').animate({
marginLeft: -800
},1000,function(){
$('#slider > li').eq(0).appendTo('#slider');
$('#slider').animate({
marginLeft: 0
},0);
});
},3000);
* 오른쪽의 Edit in JSFiddle을 클릭하시면 직접 내용을 수정해서 결과를 확인하실 수도 있습니다.
* 왕초보 주의 : html과 css는 대소문자를 구분하지 않지만 스크립트는 대소문자를 구분합니다.
2. 위로 올라가는 슬라이더
3. 아래로 내려가는 슬라이더
------------------------
슬라이드 이미지에 링크를 거는 건 간단하지만 변경해야될 부분이 있습니다.
html을
<li>
<a href="https://jjum.com"><img src="https://via.placeholder.com/800x300.png/0000ff?text=Slide1-Virtual_Image" alt="슬라이드1"></a>
</li>
식으로 변경한다고 하면
css와 스크립트에서 중요하게 변경해야할 부분이 있습니다.
#sliderV>li 에서 ">"를 빼고 #sliderV li 로 변경해야 합니다.