我的脚本 js 不会改变我的照片 src答案

【问题标题】：my script js does not change my photo src我的脚本 js 不会改变我的照片 src
【发布时间】：2020-05-07 08:33:27
【问题描述】：

我想动态添加图像并使用图像滑块。我写了一些脚本，在控制台中我看到更改 src，但在 HTML 中仍然是一张图片。这是一个代码：

HTML：

<div class="sliderItau">
   <a class="prevButton"> <img alt="prevButton" src="/images/prev.png"></a>
   <div class="jcarousel">
     <img id="image" src="/images/debito/itau_tela_02.png" alt=""></div>
   <a class="nextButton"><img alt="nextButton" src="/images/next.png"></a>
</div>

JS：

const images = []

let slideIndex = 1

function preload_images() {

    var image = new Image()
    image.src = 'images/debito/itau_tela_01.png'
    images[0] = image
    image = new Image()
    image.src = 'images/debito/itau_tela_02.png'
    images[1] = image
    image = new Image()
    image.src = 'images/debito/itau_tela_03.png'
    images[2] = image

}

preload_images()

const showSlidesItau = function (n) {
    let img = document.getElementById('image')
    let slides = img.src
    slides = images[slideIndex].src
    console.log(slides)
    console.log(images[slideIndex].src)
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
}

const plusSlides = function (n) {
    console.log(slideIndex)
    showSlidesItau((slideIndex += n))
}

const next = document.querySelector('.nextButton')
const prev = document.querySelector('.prevButton')
//buttons ITAU
next.addEventListener('click', function () {
    plusSlides(+1)
})
prev.addEventListener('click', function () {
    plusSlides(-1)
})

所以每次我按下 prev 或 next 按钮时，我在 colse 中的 src 都会发生变化。但不是在 HTML 中。知道为什么吗？

【问题讨论】：

slides = images[slideIndex].src - 您正在更改 slides 变量，而不是元素。需要直接更改属性：img.src = images[slideIndex].src
哇！伟大的。我没想到 :) 谢谢 :)
@GuyIncognito 我认为您应该从您的评论中给出一个答案，以便提问者可以接受它，因为这显然解决了问题。
嗯。这基本上是一个错字，肯定有无数重复。

标签： javascript html

【解决方案1】：

我不是 JS-Pro，但我想指出一些事情。正如 GuyIncognito 已经在 cmets 中写的那样，您必须直接设置 src 属性，而不是在复制的变量上。但是你的showSlidesItau() 函数还有一些缺陷：

在设置图像源之前进行检查 - 而不是之后

如果n 或slideIndex 超出图像数组的索引范围，您仍会尝试设置它并收到错误。

将 slideIndex 设置为 n

否则，只有当您位于图像数组的开头或结尾时，图像才会发生变化...

数组索引从 0 开始，到 array.length -1 结束

因此，如果您尝试类似 array[array.length] 的方法，您将收到错误消息。

我试着稍微改写一下函数：

const showSlidesItau = function (n) {
  let img = document.getElementById("image");
  // First check the index
  if (n >= images.length) {
    slideIndex = 0;
  } else if (n < 0) {
    slideIndex = images.length - 1;
  } else {
    slideIndex = n;
  }
  // then set the src attribute
  img.src = images[slideIndex].src;
  console.log(images[slideIndex].src);
};

希望能帮到你。

【讨论】：