jQuery & CSS3 & HTML5 - 슬라이드(Slider)
[HTML + CSS]
소스
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> body { width:900px; margin:0px auto; } img { width:400px; height:300px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function () {
}); </script> </head> <body> <h2>Slider</h2> <hr /> <section id="outerSection"> <section id="innerSection"> <article><img src="2013-2-15.gif"></article> <article><img src="2013-2-22.gif"></article> <article><img src="2013-3-11.jpg"></article> <article><img src="2013-3-15.jpg"></article> <article><img src="2013-3-22.jpg"></article> </section> </section> </body> </html> |
<section> 태그에 id 를 부여하였습니다. 그리고 CSS 부분 <style> 태그는 가운데 정렬 해주고 이미지의 크기를 한정해주었습니다.
그리고 <img> 태그의 src="" 경로는 아래 처럼 넣어주셔서 사용해주시면 됩니다.
결과
<style> 을 더 주어보겠습니다.
결과.
모든 그림들이 한 곳으로 겹쳐있는 것 입니다.
article 를 왼쪽으로 분여줌으로 써 수평으로 정렬하였습니다.
이제 간단한 버튼을 만들어줌으로써 구현을 해보겠습니다.
LeftArrow 와 rightArrow 를 Click 할 경우 toLeftButtonClick() 와 toRightButtonClick() 함수를 호출합니다.
numberOfArticle 이라는 변수를 만들어 article의 갯수 만큼을 넣어줍니다. "article"을 하면 article의 배열이 만들어지고 그 크기를 빼서 넣어주었습니다.
그리고 현재 위치를 저장할 수 있는 currentPosition 을 만들고 이어서 articleAnimation()이라는 함수를 만들었습니다.
currentPosition이 막 원래 크기를 증가하면 안되기 때문에, 다음과 같은 조건(if)를 주었습니다. 조건이 발동하면 currentPosition 값이 0으로 돌아갑니다.
articleAnimation()에 wiillMove 에 400 * (-currentPosition) 만큼 이동하는 함수를 만들었습니다.
그리고 "#innerSection" 에 animate 메소드를 willMove 만큼 slow 하게 이동하게 해주었습니다.
그리고 마지막으로 <style>를 주겠습니다.
결과.
검은색 블럭을 클릭하면 슬라이드가 동작하는걸 확인하실 수 있습니다.
'Skills > Web' 카테고리의 다른 글
| hover (mouseover, mouseout) (0) | 2014.01.13 |
|---|---|
| HTML5 & CSS3 & jQuery - 하부고정 슬라이드 (0) | 2014.01.13 |
| jQuery + CSS3 + HTML5 - 레이어 팝업(Layr popup) (0) | 2014.01.13 |
| jQuery + CSS3 + HTML5 - 아코디언 (0) | 2014.01.13 |
| jQuery Basic 17강 - hasClass() (0) | 2014.01.13 |
