Question

代码应该在单击上一个箭头时单击下一个箭头和上一个图像时显示下一个图像。它不起作用。（分配img.src = imgs [this.i]时发生错误;它表示无法设置属性＆＃39; src＆＃39; of null at collection.next）。

Javascript代码：

＆＃13;

var arr = new collection(['cake.png', 'image2.png', 'image3.png', 'image1.png']);

function collection(imgs) {
  this.imgs = imgs;
  this.i = 0;
  this.next = function(element) {
    var img = document.getElementById('element')
    this.i++;
    if (this.i == imgs.length) {
      this.i = 0;
    }
    img.src = imgs[this.i].src;


  }
  this.prev = function(element) {
    var img = document.getElementById('element');
    this.i--;
    if (this.i < 0) {
      this.i = imgs.length - 1;
    }
    img.src = imgs[this.i].src;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>photos</title>
  <script src="photos.js"></script>
</head>

<body>

  <input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
  <img id='mainImg' src="cake.png">
  <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />


</body>

</html>

＆＃13;

不使用jquery。我也没有足够的经验。谢谢你的时间

Answer 1

你有三个错误：

您将图像引用为img.src = imgs[this.i].src;并且您只有一个字符串数组，而不是具有src属性的对象数组。 img.src = imgs[this.i];是获取网址的正确方法。
您使用了
```
var img = document.getElementById('element');
```
何时应该使用
```
var img = document.getElementById(element);
```
element是来自onclick事件的论据。它包含您应该使用的图像的id。 "element"只是一个字符串。您尝试查找id等于element但不存在的元素。
修改：您还应该使用<和>代表<和>。否则你的HTML可能搞砸了。更多关于here。

＆＃13;

var arr = new collection(['http://images.math.cnrs.fr/IMG/png/section8-image.png', 'https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg', "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"]);

function collection(imgs) {
  this.imgs = imgs;
  this.i = 0;

  this.next = function(element) {
    var img = document.getElementById(element);
    
    this.i++;
    if (this.i >= imgs.length) {
      this.i = 0;
    }

    img.src = imgs[this.i];
  };
 
  this.prev = function(element) {
    var img = document.getElementById(element);
  
    this.i--;
    if (this.i < 0) {
      this.i = imgs.length - 1;
    }
  
    img.src = imgs[this.i];
  };
  
  this.next("mainImg"); // to initialize with some image
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>photos</title>
  <script src="photos.js"></script>
</head>

<body>

  <input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
  <img id='mainImg' src="cake.png">
  <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />


</body>

</html>

＆＃13;

这就是我亲自做的事情：

＆＃13;

var myCollection = new Collection([
  "http://images.math.cnrs.fr/IMG/png/section8-image.png",
  "https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg",
  "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"
], "mainImg");

document.getElementById("next_btn").onclick = function() {
  myCollection.next();
};

document.getElementById("prev_btn").onclick = function() {
  myCollection.prev();
}

function Collection(urls, imgID) {
  var imgElem = document.getElementById(imgID);
  var index = 0;

  this.selectImage = function() {
    imgElem.src = urls[index];
  };

  this.next = function() {
    if (++index >= urls.length) {
      index = 0;
    }

    this.selectImage();
  };

  this.prev = function(element) {
    if (--index < 0) {
      index = urls.length - 1;
    }

    this.selectImage();
  };

  // initialize
  this.selectImage();
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>photos</title>
  <script src="photos.js"></script>
</head>

<body>
  <input id="next_btn" type='button' value='&lt;' />
  <img id='mainImg'>
  <input id="prev_btn" type='button' value='&gt;' />
</body>

</html>

＆＃13;

Answer 2

为什么要将字符串发送到arr.next（'mainImg'）函数？你的img元素总是有相同的id，只改变src。和document.getElementById（element）也是同一个img元素。

html：<img id='mainImg' src="cake.png">

js：document.getElementById('mainImg')

将img元素视为容器，id是它的标识符。

Answer 3

var start_pos = 0;

var img_count = document.getElementsByClassName('icons').length - 1;

var changeImg = function(direction){

pos = start_pos = (direction == "next")? (start_pos == img_count)? 0 : start_pos+1 : (start_pos == 0)? img_count : start_pos-1;

console.log(pos)

}


document.getElementById('left').onclick = function(){ changeImg("previous"); }
document.getElementById('right').onclick = function(){ changeImg("next"); }

Javascript下一张和上一张图片

3 个答案: