具有Javascript的簡單圖像庫需要旋轉圖像嗎？

Question

這應該是javascript中的一個簡單的照相館，它將縮略圖隨機地旋轉成更大的圖像。 在更改基礎類以使其與類保持一致之前，我已經使用了基本庫，因此我認為onclick函數（我所做的更改）有問題。 我不知道為什么。 在底部，我添加了要求更改的內容，但我不應該使用。

我的第一個Javascript照片庫

<div id = "mainImg" ></div>        
<div id = "thumbs" ></div>   

<script>
    var pics = new Array();
    pics[0] = 'cat.jpg';
    pics[1] = 'dog.jpg';
    pics[2] = 'panda.jpg';
    pics[3] = 'piggy.jpg';       

    var picsDesc = new Array();
    picsDesc[0] = 'Cat';
    picsDesc[1] = 'Dog';
    picsDesc[2] = 'Panda';
    picsDesc[3] = 'Piggy';     

    //display stuff
    document.getElementById('mainImg').innerHTML = `<img src = '${pics[0]}' class = "mainSize" alt = '${picsDesc[0]}'>`;
    for(let i = 0; i<pics.length; i++){
        document.getElementById('thumbs').innerHTML += `<img src = '${pics[i]}' class = "thumbSize" alt = '${picsDesc[i]}' onclick = "change(${i})"/>`;              
    }

    //change picture functions
    var rotate = setInterval(changeOn3, 3000);

    function changeOn3(){
        meh = Math.ceil(Math.random() * 3);
        change(meh);   
    }

    function change(index){                 
        document.getElementById('mainImg').src = pics[index];           
    }      

//function changeImg(event){
//      var target = event.target;
//
//      if(target.tagName == "IMG"){
//            document.getElementById("mainImg").src = 
//target.getAttribute("src");
//      }
//} 

 </script>

Answer 1

        document.getElementById('mainImg').innerHTML = `<img src = '${pics[index]}' class = "mainSize" alt = '${picsDesc[index]}'>`; 

這應該是你的答案。 如果您尚未在實際的HTML代碼中定義DOM元素的.src，則無法對其進行更改。