Question

我已经创建了我自己的javascript类：

function BeersOfTheWeek(){
    this.htmlImgObj = document.getElementById("beerImage");
    this.imgSources = ["guinness.jpeg","Heineken.png","SAM-ADAMS-BEER.jpg"];
    this.currentImgNmbr = 0;
    this.htmlImgObj.src = this.imgSources[this.currentImgNmbr];
    this.htmlImgObj.className = 'slideInRight';
}

BeersOfTheWeek.prototype.rotateNextBeer = function(){

    if(this.currentImgNmbr == (this.imgSources.length - 1)){
        this.currentImgNmbr = 0;
    } else {
        this.currentImgNmbr++;
    }
    this.htmlImgObj.src = this.imgSources[this.currentImgNmbr];
    this.htmlImgObj.className = 'slideInRight';
};

我正在尝试使用rotateNextBeer（）函数每五秒钟连续显示另一张图片，我这样做是通过调用：

<script>
    window.setInterval("globals.botw.rotateNextBeer()",5000);
</script>

在我的html文件中。

我有一个.js文件，其中包含我项目的一些全局变量，该对象的相关代码是：

var globals = {};
globals.botw = new BeersOfTheWeek();

我的问题是我的网站会在imgSources中显示第一个图片没问题，但是当每隔五秒触发一次window.setInterval（）时，没有任何反应。它似乎卡住了，显示的第一个图像永远不会改变。

Answer 1

您使用的是一个等于赋值运算符的等号。当你试图比较两个值时，你需要使用双等号（==）。或者实际上，如果要比较操作数的值和类型，则与运算符（===）相同。

if(this.currentImgNmbr = (this.imgSources.length - 1)){

应该是：

if(this.currentImgNmbr == (this.imgSources.length - 1)){

Answer 2

改变这个：

if(this.currentImgNmbr = (this.imgSources.length - 1)){

是一个适当的比较而不是作业。 =执行任务。 ==做比较：

if(this.currentImgNmbr == (this.imgSources.length - 1)){

仅供参考，在没有if/else的情况下旋转固定长度的常见设计模式是使用模数运算符，如下所示：

BeersOfTheWeek.prototype.rotateNextBeer = function(){

    this.currentImgNmbr = (this.currentImgNmbr + 1) % this.imgSources.length
    this.htmlImgObj.src = this.imgSources[this.currentImgNmbr];
    this.htmlImgObj.className = 'slideInRight';
};

无法使用Javascript交换图像

2 个答案: