728x90
300x250
SMALL
요구사항)
01_ 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환
02_ 전환 시간을 설정할 수 있도록
03_ 이미지가 계속해서 무한롤링되도록
04_ 함수를 활용해 하나의 함수로 두 개의 배너가 동작할 수 있게
<script>
$(document).ready(function() {
var imgList1 = ["logo_01.jpg", "logo_02.jpg", "logo_03.jpg", "logo_04.jpg", "logo_05.jpg"];
var imgList2 = ["logo_02.jpg", "logo_05.jpg", "logo_03.jpg", "logo_04.jpg", "logo_01.jpg"];
// 첫 번째 배너
banner("#banner1", imgList1, 1000);
// 두 번째 배너
banner("#banner2", imgList2, 3000);
})
function barrner(selector, imgList, speed) {
var currentIndex = 1;
var $banner = $(selector);
// 1초에 한번씩 함수 호출
setInterval(function() {
// 다음에 등장할 배너 인덱스 값 구하기
currentIndex++;
if (currentIndex >= imgList.length)
currentIndex = 0;
// 다음 이미지 이름 구하기
var imgName = imgList1[currentIndex];
// 다음 이미지 출력
$banner.attr("src", "./images/" + imgName);
}, speed)
}
</script>
<body>
<img src="images/logo_01.jpg" class="banner" id="banner1">
<img src="images/logo_02.jpg" class="banner" id="banner2">
</body>단계 01: 함수만들기
전환기능을 담을수 있는 함수 banner라는 전역함수를 만들었다.
ready()내부에도 함수를 만들 수 있지만 되도록 만들지 않도록한다.
단계 02 : 이미지 전환기능 함수에 넣는다.
단계 03 : 매개변수 만들기
함수 하나로 여러개를 사용하기 위해 변경되는 값은 매개변수로 만들어준다
단계 04 : 함수호출
banner함수를 호출한다.
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 물고기 잡기 게임 (0) | 2019.08.26 |
|---|---|
| 랜덤으로 배경이미지 변경하기 (0) | 2019.08.25 |
| 타이머 함수 : 심플이미지 배너 (0) | 2019.08.09 |
| 타이머를 함수 게임 (0) | 2019.08.08 |
| 타이머 멈추기 clearInterval (0) | 2019.08.07 |
댓글