javascript影像交換器顯示一個框而不是我的影像-有解無憂

我遇到了一個問題，我的影像都看不到，只有一個盒子。我有 4 張影像要每 2 秒交換一次

<picture>
    <img src="" alt="javascript影像交換器顯示一個框而不是我的影像" >
    <div>
        <img  src="./Assets/slider-1.png" alt="javascript影像交換器顯示一個框而不是我的影像">
        <img  src="./Assets/slider-2.png" alt="javascript影像交換器顯示一個框而不是我的影像">
        <img  src="./Assets/slider-3.png" alt="javascript影像交換器顯示一個框而不是我的影像">
        <img  src="./Assets/slider-4.png" alt="javascript影像交換器顯示一個框而不是我的影像">
    </div>
</picture>

這是我的javascript，我是新手，所以我不確定發生了什么。

const image1 = document.querySelector('.image1')
const image2 = document.querySelector('.image2')
const image3 = document.querySelector('.image3')
const image4 = document.querySelector('.image4')
const images = [image1, image2, image3, image4];
let index = 0;

const mainHobby = document.querySelector('.main-hobby');

console.log(images);

function change() {
    mainHobby.src = images[index]
    index > 2 ? index = 0 : index   ;
    ;
}

window.onload = function () {
    setInterval (change, 2000);
}

和css（如果需要）

.main-hobby {
     display: block;
     width: 70px;
     height: 70px;
     margin-bottom: 20%;
   }

謝謝你提供的所有幫助

javascript影像交換器顯示一個框而不是我的影像

uj5u.com熱心網友回復：

您正在嘗試將設定src為影像元素，您應該將其設定為影像的src：

function change() {
    mainHobby.src = images[index].src;
    if (index >= images.length-1) {
        index = 0;
    } else {
        index  ;
    }
}

uj5u.com熱心網友回復：

您只需將 src 屬性而不是整個 img 標記設定到 maon-hobby 容器中。像那樣：

const image1 = document.querySelector('.image1')
const image2 = document.querySelector('.image2')
const image3 = document.querySelector('.image3')
const image4 = document.querySelector('.image4')

const images = [image1, image2, image3, image4];
let index = 0;

const mainHobby = document.querySelector('.main-hobby');

// console.log(images);

function change() {
  console.log(index)
  let src = images[index].getAttribute('src');
  mainHobby.src = src
  console.log(mainHobby)
  index > 2 ? index = 0 : index   ;  
}

window.onload = function () {
   setInterval (change, 2000);
}

.main-hobby {
  display: block;
  width: 70px;
  height: 70px;
  margin-bottom: 20%;
}

<img src="https://via.placeholder.com/200/green" alt="" class="main-hobby">

  <div>
    <img class="image1" src="https://via.placeholder.com/200/green" alt="person-learning-new-technology">
    <img class="image2" src="https://via.placeholder.com/200/gray" alt="a-house">
    <img class="image3" src="https://via.placeholder.com/200/red" alt="person-playing-golf">
    <img class="image4" src="https://via.placeholder.com/200/yellow" alt="xbox-controller">
  </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421445.html

標籤：

上一篇：按鍵排序物件陣列

下一篇：如何將prop插入<router-link>？