Question

新编码员 - 第一个问题在这里。我正在做第一个免费代码阵营项目，但问题是关于我想要添加和了解的不需要的繁荣，它不是项目所需要的。我希望我用HTML链接的专辑封面每x秒更换一次。但没有任何事情发生。图像只是保持静止。感谢

    <h2> Discography </h2>
<div class="row">
  <div id="album" class="col-lg-8">
    <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div>
    <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div>
    <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div>
    <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div>
    <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div>
    <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div>
    <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div>
  </div>

和javascript代码

    //Change album cover after 5 seconds - continous loop//
var Discography = document.getElementById("album");
var disc = ["album 0", "album 1", "album 2", "album 3", "album 4", "album 5", "album 6"];
var counter = 0;

function changeDisc() {
  if (counter >= disc.length) {
    counter = 0;
  }
  Discography.setAttribute =disc[counter];
  counter++;

}

var myCounter = setInterval(changeDisc, 6000);

Discography.onClick = function() {

  clearInterval(Disography);

  Discography.innerHTML = "Counter stopped";

};

Answer 1

您实际上并未设置该属性。您实际上是删除了setAttribute方法并将其替换为url。我想你想要这个：

function changeDisc() {
  if (counter >= disc.length) {
    counter = 0;
  }
  Discography.setAttribute('src', disc[counter]);
  counter++;

}

Answer 2

我设法让您的代码正常运行。我不知道这是不是你想要的，但我希望它对你有帮助。

分配属性

Discography.setAttribute = disc[counter];

应

Discography.setAttribute("src", discs[counter]);

绑定EventHandlers

Discography.onClick = function() {

应

Discography.addEventListener("click", function () {

错误的元素

您尝试将src属性分配给<div id="album" class="col-lg-8">，div并且没有该属性。

要解决此问题，我已将所有可能的相册图片添加到Array，并将其分配给单个<img />以使其正常工作。

请注意，我修改了一些命名约定，我更喜欢这些约定。

我的解决方案

＆＃13;

var discs = [
        "https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg",
        "https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg", 
        "https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg",
        "https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg",
        "https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg",
        "https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" ,
        "https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg",
];

var counter = 0;
var discography = document.getElementById("album");

function moveToNextDisc() {
    if (counter >= discs.length) {
        counter = 0;
    }

    discography.setAttribute("src", discs[counter]);
    counter++;
}

var interval = setInterval(moveToNextDisc, 1000);

discography.addEventListener("click", function () {
    clearInterval(interval);
    discography.innerHTML = "Counter stopped";
});

＆＃13;

<h2>Discography</h2>

<div class="row">
    <div class="col-lg-8">
        <div class="albums">
            <span>
                <img id="album" alt="1994" class="img-responsive">
            </span>
        </div>
    </div>
</div>

＆＃13;

Answer 3

出于学习目的，您正在开发一个组件：

更改涵盖每个曲目更改
在用户暂停时停止

Javascript 应该用于业务逻辑和 html / css 作为视图反映状态组件。

所以我们需要Object至少three methods：

public play启动播放器
public pause暂停播放器
private _loop遍历曲目

以及控制Controller。{/ p>的html view

function Player(element, interval) {
  this.element = element;
  this.tracks = element.querySelectorAll('.albums');
  
  this.currentTrack = null;
  this.isPlaying = false;
  this._timeout = null;
  this.interval = Number(interval) || 2000;
}

Player.prototype.pause = function() {
  window.clearTimeout(this._timeout);
  this.isPlaying = false;
  
  return this;
};

Player.prototype.play = function() {
  this.isPlaying = true;
  
  return this._loop();
};

Player.prototype._loop = function() {
  var self = this;
  
  self._timeout = window.setTimeout(function() {
    var track;
    if(self.currentTrack) {
      track = self.currentTrack.nextElementSibling;
      self.currentTrack.style.opacity = 0;
    }
    
    if(!track) {
      track = self.tracks[0];
    }
  
    track.style.opacity = 1;
    self.currentTrack = track;
    
    return self._loop();
  }, self.interval);
  
  return this;
}

/** VIEW CTRL **/
function PlayerCtrl() {
  var element = document.querySelector('#album');
  var player = new Player(element, 3000);
  
  var play = document.querySelector('#Play');
  var pause = document.querySelector('#Pause');

  play.onclick = function() {
    return player.isPlaying || player.play();
  };
  pause.onclick = function() {
    return player.isPlaying && player.pause();
  };
  
  player.play();
}
document.addEventListener('DOMContentLoaded', PlayerCtrl);

#album {
  width: 300px;
  height: 300px;
  margin: 10px auto;
  overflow: hidden;
  background: lightcoral;
  position: relative;
  border: 3px dotted #333;
}

.albums {
  transition: 450ms opacity linear;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.albums img { max-width: 100%; }

<button id="Play">Play</button>
<button id="Pause">Pause</button>

<hr />

<h2> Discography </h2>
<div class="row">
  <div id="album" class="col-lg-8">
    <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div>
    <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div>
    <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div>
    <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div>
    <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div>
    <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div>
    <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div>
  </div>

setInterval（）不使用HTML中的src链接图像

3 个答案: