Question

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

那些功能的工作是什么？

nextpicture = picnumber + 1
previouspicture = picnumber + 1

好的，例如，一旦 picnumber 的值应为 2 ，我们点击 nextpicture （如果值为 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以单击上一个或 next ，因此<的值strong> picnumber 不能低于1或高于6（因为我在此图库中只有6张图片）

Answer 1

您只运行一次设置图像源的if语句。每次更改picnumber变量后，您都需要运行它们。

您可以将它们放在一个函数中，以便您可以从更改变量的每个函数中运行它们，并运行它来设置初始图像：

var picnumber = 1;
setImage();

function nextpicture(){
  picnumber = picnumber + 1
  setImage();
}

function previouspicture(){
  picnumber = picnumber - 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';
  }
}

HTML：

<img id="gallerypicture" src="" 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>

注意：不要将picnumber作为参数发送给函数。该参数将是函数内的局部变量，因此您不会更改全局变量。

另一个注意事项：您在某些位置隐藏了galleryprevious和gallerynext元素，但没有代码可以再次显示它们。我想你每次都想把它们设置为隐藏/显示。 Gershom Maes有一些代码in his answer可以解决这个问题。

您可以像这样简化函数中的代码（同时重新显示链接）：

function setImage() {
  var id = picnumber.toString();
  while (id.length < 3) {
    id = '0' + id;
  }
  document.getElementById('gallerypicture').src = "img/gallery/" + id + ".jpg";

  var prev, next;
  if (picnumber == 1) {
    prev = 'none';
  } else {
    prev = 'block';
  }
  if (picnumber == 6) {
    next = 'none';
  } else {
    next = 'block';
  }
  document.getElementById('galleryprevious').style.display = prev;
  document.getElementById('gallerynext').style.display = next;
}

Answer 2

请使用此代码：

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();

Answer 3

你需要这样的东西：

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>

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

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

3 个答案: