인덱스 안에 들어갈 내용이 많아 축소 기재하고싶습니다..

ZDZ

2023-10-04 (수) 14:32:26 1,811

Copy

<img src="<?php echo G5_THEME_IMG_URL; ?>/ban01.jpg" alt="" id="Slide" width="100%" height="fit-content">

 

<script>

        let slide = document.getElementById("Slide");

        let imgArr = [

          "<?php echo G5_THEME_IMG_URL; ?>/ban01.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban02.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban03.jpg",

          "<?php echo G5_THEME_IMG_URL; ?>/ban04.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban05.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban06.jpg",

          "<?php echo G5_THEME_IMG_URL; ?>/ban07.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban08.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban09.jpg",

          "<?php echo G5_THEME_IMG_URL; ?>/ban10.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban11.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban12.jpg",

          "<?php echo G5_THEME_IMG_URL; ?>/ban13.jpg", "<?php echo G5_THEME_IMG_URL; ?>/ban13.jpg", ~ (대충 54장까지 있습니다)

        ];

 

        setInterval(()=>{

            let ranNum = Math.floor(Math.random() * imgArr.length);

            slide.src= imgArr[ranNum];

        },4000);

</script>

imgArr에 적힌 요소를 인덱스로 해서 랜덤한 숫자에 해당되는 인덱스의 이미지가 보이게 자바로 슬라이드를 만들었습니다

사진을.... 54장 넣어야하는데 imgArr 안의 내용을 간편하게 축소할 수 있는 방법은 없을까요?

(링크1) ~ (링크54) 이런 느낌으로...

그누보드5 php

답변 3개 / 댓글 1개

채택된 답변

+20 포인트

탈퇴회원

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-10-04 (수) 14:40:11

반복문을 사용해서 다음과 같이 해 볼 수 있을것 같습니다

Copy

let imgArr = [];

for (let i = 1; i <= 54; i++) {
  imgArr.push(`<?php echo G5_THEME_IMG_URL; ?>/ban${i < 10 ? '0' : ''}${i}.jpg`);
}

// 나머지 코드는 이전과 동일합니다.

위의 코드를 사용하면 imgArr 배열에 1부터 54까지의 이미지 URL이 생성되고, 이를 랜덤하게 표시할 수 있습니다. 이렇게 하면 배열을 일일히 작성하는 번거로움을 줄일 수 있습니다.