在JS中使用带数字变量的if语句

问题描述

我正在画廊。 因此，基本上我的想法是这样的：我的变量picnumber的值为1。如果单击next按钮，它将触发我的功能nextpicture ，当然，如果单击前一个按钮，它将触发我的功能previouspicture 。

那么这些功能的作用是什么？

• 下一张图片 = 图片编号 + 1

• 上一张图片 = 图片编号 + 1

好了，比如我们点击了一次nextpicture的picnumber值应为2（如果值是2它应该显示002.JPG）

我想实现它显示不同的图片有关picnumber的值是否为1-6

我尝试使用if和else if语句执行此操作，但是它不起作用。

var picnumber = 1;
function nextpicture(picnumber){
picnumber = picnumber + 1
}
function previouspicture(picnumber){
picnumber = picnumber - 1
}
if (picnumber == 1){
document.getElementById('gallerypicture').src = "img/gallery/001.jpg";
document.getElementById('galleryprevious').style.display = 'none';
}
else if (picnumber == 2){
document.getElementById('gallerypicture').src = "img/gallery/002.jpg";
}
else if (picnumber == 3){
document.getElementById('gallerypicture').src = "img/gallery/003.jpg";
}
else if (picnumber == 4){
document.getElementById('gallerypicture').src = "img/gallery/004.jpg";
}
else if (picnumber == 5){
document.getElementById('gallerypicture').src = "img/gallery/005.jpg";
}
else if (picnumber == 6){
document.getElementById('gallerypicture').src = "img/gallery/006.jpg";
document.getElementById('gallerynext').style.display = 'none';
}
else {  
document.getElementById('gallery').style.display = 'none';
}

这是我的HTML

<img id="gallerypicture" src="" alt="Photo">
<a href="javascript:void(0)" onclick="previouspicture(picnumber);"><div id="galleryprevious"></div></a>
<a href="javascript:void(0)" onclick="nextpicture(picnumber);"><div id="gallerynext"></div></a>

如您在我的第一个和最后一个if语句中所看到的，我想隐藏div以单击上一个或下一个 ，因此picnumber的值不能小于1或大于6（因为我只有6该画廊中的图片）

请使用此代码：

var picnumber = 1;
function nextpicture(picnumberLocal){
    picnumber = picnumberLocal+ 1;
    setImage();
}
function previouspicture(picnumberLocal){
    picnumber = picnumberLocal- 1;
    setImage();
}

function setImage(){
    if (picnumber == 1){
    document.getElementById('gallerypicture').src = "img/gallery/001.jpg";
    document.getElementById('galleryprevious').style.display = 'none';
    }
    else if (picnumber == 2){
    document.getElementById('gallerypicture').src = "img/gallery/002.jpg";
    }
    else if (picnumber == 3){
    document.getElementById('gallerypicture').src = "img/gallery/003.jpg";
    }
    else if (picnumber == 4){
    document.getElementById('gallerypicture').src = "img/gallery/004.jpg";
    }
    else if (picnumber == 5){
    document.getElementById('gallerypicture').src = "img/gallery/005.jpg";
    }
    else if (picnumber == 6){
    document.getElementById('gallerypicture').src = "img/gallery/006.jpg";
    document.getElementById('gallerynext').style.display = 'none';
    }
    else {  
        document.getElementById('gallery').style.display = 'none';
    }
}
setImage();

您需要这样的东西：

JS：

var picnumber = 1;
function nextpicture()
{
   picnumber++; // increment the picture number

   // if the picnumber is bigger than 6 then we do nothing
   if (picnumber > 6) {
       return;
   }

   setImage();

   // if picnumber is 6 then we don't show the gallerynext button anymore
   if (picnumber == 6) {
       document.getElementById('gallerynext').style.display = 'none';
   }
   // if picnumber is 2 then we must to show again the previous button
   else if(picnumber == 2) {
       document.getElementById('galleryprevious').style.display = 'block';
   }
}

function previouspicture()
{
   picnumber--;

   if (picnumber < 1) {
       return;
   }

   setImage();

   if (picnumber == 1) {
       document.getElementById('galleryprevious').style.display = 'none';
   } else if(picnumber == 5) {
       document.getElementById('gallerynext').style.display = 'block';
   }
}

function setImage() {
    var imgNum = picnumber.toString();
    while (imgNum.length < 3) imgNum = '0'.concat(imgNum);
    // set the picture source depending on the picnumber value
    document.getElementById('gallerypicture').src = "img/gallery/" + imgNum + ".jpg";
}

HTML：

<img id="gallerypicture" src="img/gallery/001.jpg" alt="Photo">
<a href="javascript:void(0)" onclick="previouspicture();"><div id="galleryprevious"></div></a>
<a href="javascript:void(0)" onclick="nextpicture();"><div id="gallerynext"></div></a>

请注意，如果您隐藏下一个/上一个按钮，则还必须再次显示它们