[jQuery] 배너 banner/ 이미지 클릭할 때 링크 연결 / 랜덤 이미지 슬라이드 / Math.random()

seulki·2022년 9월 28일
0

[jQuery]

목록 보기
12/30
post-thumbnail

🎈이미지가 순서대로 바뀌는 배너 알아보러가기!

배너 이미지가 랜덤이 아닌 순서대로 변경!


🎈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초마다 랜덤으로 변경

profile
웹 개발자 공부 중

0개의 댓글