랜덤으로 이미지 생성 (랜덤 팝업 모달)

Eddy·2023년 4월 27일
0

Javascript

목록 보기
24/27
var imgArray = new Array();
	imgArray[0] = "이미지 소스";
	imgArray[1] = "이미지 소스";
	imgArray[2] = "이미지 소스"
	imgArray[3] = "이미지 소스";
	
	function showImage(){
		var imgNum = Math.round(Math.random()*3);
		var objImg = document.getElementById("introImg");
		objImg.src = imgArray[imgNum];
	}
  // 팝업 모달 이미지와 스크롤 이동 타겟
  var popUpImages = [{
    src: 'https://static.shoeprize.com/kicks_2nd_anniversary/kicks_2nd_anniversary_pop_up.webp',
    target: '#targetSocks'
  }, {
    src: 'https://static.shoeprize.com/kicks_2nd_anniversary/kicks_2nd_anniversary_pop_up2.webp',
    target: '#targetTshrits'
  }, {
    src: 'https://static.shoeprize.com/kicks_2nd_anniversary/kicks_2nd_anniversary_pop_up3.webp',
    target: '#targethoddies'
  }];

  // 팝업 모달 랜덤 생성
  function showPopUpModal() {
    var imgNum = Math.round(Math.random() * 2)
    var objImg = $('.pop_up_area img')

    $('body').append(`<div class="pop_up_area">
      <img src=${popUpImages[imgNum].src} alt="popup modal image">
      <a href="#">
        <div class="btn_scroll" data-target=${popUpImages[imgNum].target}></div>
      </a>
      <a href="#">
          <div class="btn_cancel"></div>
      </a>
    </div>`)
  }

0개의 댓글