Простая галерея изображений с Javascript необходимо вращать изображения? - PullRequest
0 голосов
/ 02 октября 2018

Предполагалось, что это простая фотогалерея в javascript, которая будет случайным образом поворачивать миниатюры изображений в большее изображение.У меня была базовая галерея, работающая до того, как я изменил ее для выравнивания с классом, поэтому я думаю, что что-то не так с моей функцией onclick (что я изменил).Я не могу понять, почему, хотя.Внизу я добавил то, что меня попросили изменить, но я не должен его использовать.

Моя 1-я фотогалерея 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>

1 Ответ

0 голосов
/ 02 октября 2018
        document.getElementById('mainImg').innerHTML = `<img src = '${pics[index]}' class = "mainSize" alt = '${picsDesc[index]}'>`; 

Это должен быть ваш ответ.Вы не можете изменить .src элемента DOM, если вы не определили его в реальном HTML-коде.

...