728x90
300x250
SMALL
기존 코드를 수정해 1초에 한번씩 배열에 들어있는 이미지를 랜덤 순으로 전환되게 만들기
<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 banner(selector, imgList, speed){
var currentIndex=1;
var $banner = $(selector);
// 1초에 한번씩 함수 호출
setInterval(function(){
// 다음에 등장할 배너 인덱스 값 구하기
/* currentIndex++;
if(currentIndex>=imgList.length)
currentIndex = 0; */
0에서 이미지 개수까지의 랜덤인덱스 값 구하기
var currentIndex =Math.floor(Math.random()*imgList.length);
// 다음 이미지 이름 구하기
var imgName = imgList[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>var currentIndex =Math.floor(Math.random()*imgList.length); 랜덤한 이미지 숫자 구해서 정수로 만든 후에 currentIndex에 넣어준다.
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 공백 없애기 함수로 만들기 (0) | 2019.09.01 |
|---|---|
| 물고기 잡기 게임 (0) | 2019.08.26 |
| 타이머 함수 : 심플배너만들기2 (0) | 2019.08.10 |
| 타이머 함수 : 심플이미지 배너 (0) | 2019.08.09 |
| 타이머를 함수 게임 (0) | 2019.08.08 |
댓글