🎈이미지가 랜덤순서로 바뀌는 배너 알아보러가기!
🎈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/"},
];
let idx = 0;
function banner_img(){
$('#banner-img').attr('src', arr[idx].img);
$('#banner-link').attr('href', arr[idx].url);
console.log(idx);
++idx;
if(idx > arr.length-1){
idx = 0;
}
}
$(function(){
banner_img();
setInterval(function(){banner_img()},2000);
})
</script>-
이미지와, 링크를 객체로 만들어 arr 배열을 만듬
-
인덱스를 0으로 초기화하고, banner_img()메서드를 실행 한 후,
idx변수를 1씩 증가시킨다.
if문으로 idx의 값이 배열의 idx값을 초과하게 되면
idx값을 0으로 초기화 한다. -
attr()메서드를 사용하여 'src'와 'href' 요소의 값을 변경
attr() 알아보기! -
페이지
로드와 동시에 배너생성 메소드 호출될 수 있도록,
$(function(){ })사용 ->document.ready()와 동일한 기능
$(function(){ } 알아보기! -
setInterval()메서드로 이미지 2초마다 랜덤으로 변경
웹 개발자 공부 중