🎈이미지가 순서대로 바뀌는 배너 알아보러가기!
🎈HTML
<body >
<!-- 베너영역 -->
<div id="banner">
<a href="#" id="banner-link" target="_blank">
<img src="" id="banner-img" width="320" />
</a>
</div>
</body>
- 이미지가 2초마다 랜덤으로 변경되며, 이미지를 클릭하면 연결된 링크로 연결된다.
🎈이미지가 랜덤으로 2초마다 바뀌며, 이미지를 누르면 링크로 연결 !
<script>
let arr = [
{ img : 'img/1.jpg', url : "http://www.naver.com"},
{ img : 'img/2.jpg', url : "http://www.daum.net"},
{ img : 'img/3.jpg', url : "http://www.google.com"},
{ img : 'img/4.jpg', url : "https://velog.io/"},
];
function random(n1, n2){
return parseInt(Math.random() * (n2- n1 + 1)) + n1;
}
function banner_random(){
let idx = random(0, arr.length-1);
$('#banner-img').attr('src', arr[idx].img);
$('#banner-link').attr('href', arr[idx].url);
}
$(function(){
banner_random();
setInterval(function(){banner_random()},2000);
})
</script>-
이미지와, 링크를 객체로 만들어 arr 배열을 만듬
-
Math.random()을 사용하여 난수를 뽑는 random()메서드
Math.random()은실수를 반환하기 때문에정수로 바꾸기 위해서는
parseInt()또는Math.floor()로 Math.random()을 감싸줘야 한다. -
banner_random()메서드에서 랜덤 숫자를 인덱스로 사용하고,
attr()메서드를 사용하여 'src'와 'href' 요소의 값을 변경
attr() 알아보기! -
페이지
로드와 동시에 배너생성 메소드 호출될 수 있도록,
$(function(){ })사용 ->document.ready()와 동일한 기능
$(function(){ } 알아보기! -
setInterval()메서드로 이미지 2초마다 랜덤으로 변경
웹 개발자 공부 중