画像のランダム切り替え(未完成)

配列の中に画像のパス、リンク、あと初期に表示させるかどうかのプロパティ記載して、読み込み後は一定時間ごとにランダムで画像を切り替えるコードをjsとjqueryで実装してみました。まだ未完成ですが備忘録として載せます。

html**

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ランダム画像切り替え</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/random.js"></script>
</head>
<body>
    
    <ul id="rcl">
        <!-- カラー画像格納場所 -->
    </ul>
    <!-- #rcl -->

</body>
</html>

CSS**

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  display: block;
  height: 100%;
}

a:hover {
  opacity: 0.7;
}

ul#rcl li {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: none;
  -webkit-transition: 1s;
  transition: 1s;
  opacity: 0;
}

ul#rcl li.active {
  display: inline-block;
  animation-duration: 1s;
  animation-name: fade-in;
  -moz-animation-duration: 1s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: fade-in;
  opacity: 1.0;
}

@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-webkit-keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */

JS**


document.addEventListener("DOMContentLoaded", function(event) {
    console.log("動いている")

    const randombox = document.querySelector('#rcl')
    // console.log(randombox)

    let imgList = [
        {imgSrc:'01.jpg', imgLink:'01', state:true },
        {imgSrc:'02.jpg', imgLink:'02', state:true },
        {imgSrc:'03.jpg', imgLink:'03', state:true },
        {imgSrc:'04.jpg', imgLink:'04', state:true },
        {imgSrc:'05.jpg', imgLink:'05', state:true },
        {imgSrc:'06.jpg', imgLink:'06', state:true },
        {imgSrc:'07.jpg', imgLink:'07', state:true },
        {imgSrc:'08.jpg', imgLink:'08', state:true },
        {imgSrc:'09.jpg', imgLink:'09', state:true },
        {imgSrc:'10.jpg', imgLink:'10', state:false }
    ]

    // 要素にimgListの数ぶんのliタグを入れる
    function setLi(array) {
        array.forEach( function( value ) {
            let output;
            output = `<li style="background-image: url('img/${value.imgSrc}');"><a href="${value.imgLink}"></a></li>`
            // console.log(output)
            $(randombox).append(output) 
        })
    }

    function setCnts(array) {
        array.forEach( function( value, index ) {
            let b = index + 1
            let d = `li:nth-child(${b})`
            let url = value.array
            // console.log(b)

            if(value.state === true){
                $(d).addClass('active')
                // $(d).find('a').attr('href',url)
            }else{
                $(d).removeClass('active')
                // $(d).find('a').attr('href','')
            }
        })
    }




    let result = new Promise(function(resolve) {
        resolve(setLi(imgList));
    })

    result.then( function(){ 
        setCnts(imgList) 
    })
    



    function numRand() {
        return Math.floor(Math.random() * imgList.length)
    }

    function makeFalseTrue(array){
        const num = numRand()
        if(array[num].state == true ){
            makeFalseTrue(array)
        }else{
            array[num].state = true
        }
    }

    function makeTrueFalse(array){
        const num = numRand()
        if(array[num].state == false ){
            makeTrueFalse(array)
        }else{
            array[num].state = false
        }
    }

    setInterval(() => {
        makeFalseTrue(imgList)
        makeTrueFalse(imgList)

        setCnts(imgList)

        console.log('OK')

    }, 5000);
    

})