카운트 업을 이용해 이미지 슬라이드 만드는 방법!
감기가 걸려, 코맹맹이가 되었다. 끙끙거리며 블로그를 써본다.
제이쿼리에서 반복적으로 동작이 발생할때 많이 쓰는 방법이다.
먼저 카운트 업 타이머를 만들어 보자.
1. 카운트 업 타이머를 만들 html 마크업과 css 설정을 해준다.
1 2 3 4 5 6 | <style> .countUp{font-size: 50px;text-align: center;} </style> <body> <p class="countUp">0</p> </body> | cs |
2. 스크립트를 열어 제이쿼리를 만들어본다.
- 변수를 하나 지정해주고
- 함수를 호출해, 증가변수(n++)를 넣어준다.
- 숫자가 들어갈 p.countUp를 불러 메소드 text로 숫자를 넣어준다.
1 2 3 4 5 6 7 8 9 10 | <script> $(function(){ var n = 0 // 변수를 지정해준다. function countUp(){ //함수를 호출해준다. n++ //1씩 증가하는 증가함수를 넣어준다. $('.countUp').text(n) // p.countUp에 카운트를 시킬 숫자을 넣어준다. } }); </script> | cs |
3. 1씩 숫자를 증가 시키는 것을 반복 실행시킨다.
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $(function(){ var n = 0 function countUp(){ n++ $('.countUp').text(n) } setInterval(countUp,1000); }); </script> | cs |
그러면 이렇게 실행된다!
0
다른 다양한 방법이 있으나 이걸 배웠으니 적어본당.
'퍼블리싱 > javascript&jQuery' 카테고리의 다른 글
| 제이쿼리 .attr()를 이용해 이미지변경 및 갤러리 만들기 (0) | 2019.02.20 |
|---|---|
| 핀터레스트 레이아웃 MASONRY 사용하기 (0) | 2019.02.15 |
| 제이쿼리로 이미지 불러오기 (2) | 2019.02.14 |
| 게시판 Q&A등 아코디언 메뉴만들기 (4) | 2018.05.25 |
| 제이쿼리(jQuery) CDN연결 방법 (0) | 2018.05.11 |
