具有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，则无法对其进行更改。