Question

我正在尝试使用JavaScript制作图像滑块。我有一个HTML格式的按钮，想要根据数组中的位置更改按钮的src。这是我的以下代码。

var index = 0;
var imageArray = [{'images/img1.jpg'},{'images/img2.jpg'},{'images/img3.jpg'},{'images/img4.jpg'}];

function moveToNextSlide()
{
    if (index >= imageArray.length -1)
    {
        index =-1;
    }
    var img = getElementById(img_start);
    index = index + 1;
    var currentSlide = imageArray[index];
    getElementByid(img_start).src="currentSlide";

}

Answer 1

看起来你正在尝试创建一个字符串数组。你有：

var imageArray = [{'images/img1.jpg'},{'images/img2.jpg'},{'images/img3.jpg'},{'images/img4.jpg'}];

大括号（{}）用于声明对象;每个字符串周围的大括号都是语法错误。对于一个字符串数组，只需将带引号的文字保留为大括号：

var imageArray = ['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg'];

Answer 2

有一些问题。首先，您需要使用正确的array语法。

var imageArray = ['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg'];

此外，您需要使用document.getElementById并将getElementById设置为自己将引用window，而不是document。

最后，您需要设置变量currentSlide，如img.src= currentSlide;，而不是"currentSlide"作为字符串。

function moveToNextSlide(){
    if (index >= imageArray.length -1){
        index =-1;
    }
    var img = document.getElementById('img_start');
    index = index + 1;
    var currentSlide = imageArray[index];
    img.src= currentSlide;
}

请参阅此处的完整示例

var index = 0;
var imageArray = ['http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg', 'http://armpit-wrestling.com/wp-content/uploads/2016/06/bret-hart.jpg'];

document.body.onload = function(){
   document.getElementById('img_start').src = imageArray[0];
};

function moveToNextSlide() {
  if (index >= imageArray.length - 1) {
    index = -1;
  }
  var img = document.getElementById('img_start');
  index = index + 1;
  var currentSlide = imageArray[index];
  img.src = currentSlide;
}

img {
  max-width: 100px;
}

p {
  cursor: pointer;
}

<img id="img_start" src="">
<p onclick="moveToNextSlide()">Click Here</p>

JavaScript更改img src

2 个答案: