Javascript 3个图像之间的后退/前进按钮

我试图使一个功能，可以前进和后退之间的3个图像，取决于哪个按钮被按下。 现在我已经为前进和后退按钮创建了一个函数：

更新代码：

var img1 = "images2/page1.jpg";
var img2 = "images2/page2.jpg";
var img3 = "images2/page3.jpg";

function back() {
  var page = document.getElementById("page_1");
  if (page.src == img3) {
    page.src = img2;
  } else if (page.src == img2) {
    page.src = img1;
  } return page.src;
}

function forward() {
  var page = document.getElementById("page_1");

  if (page.src == img1) {
    page.src = img2;
  } else if (page.src == img2) {
    page.src = img3;
  } return page;
}

但是当我在HTML文档中运行它时，按钮什么也不做

HTML:

最后一页
下一页

我错过了什么

谢谢您的新手。

检查此代码：

var img1=”https://www.illumina.com/content/dam/illumina-marketing/images/company/featured-articles/bottlenose_dolphin.png"
变量img2=”https://i.pinimg.com/564x/65/d6/cf/65d6cfcb2bb5193d6d160157b34b2bd0.jpg"
变量img3=”https://i.pinimg.com/originals/d6/98/88/d698888c81f296032bd595f758b76dc5.jpg"
函数back（）{
var page=document.getElementById（“第1页”）；
如果（page.src==img3）{
page.src=img2；
}else if（page.src==img2）{
page.src=img1；
}else if（page.src==img1）{
page.src=img3；
}
}
函数forward（）{
var page=document.getElementById（“第1页”）；
如果（page.src==img1）{
page.src=img2；
}else if（page.src==img2）{
page.src=img3；
}否则如果（page.src==img3）{
page.src=img1；
}
}

最后一页
下一页

最干净的方法是维护一组要循环浏览的图像。然后使用索引变量跟踪当前要显示的图像。前进和后退按钮只是将索引变量增加或减少一个

<div>
    <img id="page_1" src="" height="400">
    <button type="button" onclick="back()">Last page</button>
    <button type="button" onclick="forward()">Next page</button>
</div>
<script>
    //array of images
    let map = ["https://www.hindustantimes.com/rf/image_size_444x250/HT/p2/2020/05/21/Pictures/_037138a2-9b47-11ea-a010-c71373fc244b.jpg",
        "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        "https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
    ]

    //index variable initially set to first image
    let index = 0;
    document.getElementById("page_1").src = map[index];

    //forward button logic
    function forward() {
        index = (index + 1) % 3;
        document.getElementById("page_1").src = map[index];
    }

    //backward button logic
    function back() {
        index = (index - 1 < 0) ? 2 : index - 1;
        document.getElementById("page_1").src = map[index];
    }
</script>

最后一页
下一页
//图像数组
让map=[”https://www.hindustantimes.com/rf/image_size_444x250/HT/p2/2020/05/21/Pictures/_037138a2-9b47-11ea-a010-c71373fc244b.jpg",
"https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=Eyjhchbawqiojeymdd9&w=1000&q=80“，
"https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
]
//索引变量最初设置为第一个图像
设指数=0；
document.getElementById（“第1页”）.src=map[index]；
//前进按钮逻辑
函数forward（）{
指数=（指数+1）%3；
document.getElementById（“第1页”）.src=map[index]；
}
//反向按钮逻辑
函数back（）{
指数=（指数-1<0）？2：指数-1；
document.getElementById（“第1页”）.src=map[index]；
}

---

1。您在支票中没有使用

page

，但您很幸运，因为您可以直接引用

page_1

（因为这是id）2。调试的第一步是检查变量<代码>使用console.log（第1.src页）<div> <img id="page_1" src="" height="400"> <button type="button" onclick="back()">Last page</button> <button type="button" onclick="forward()">Next page</button> </div> <script> //array of images let map = ["https://www.hindustantimes.com/rf/image_size_444x250/HT/p2/2020/05/21/Pictures/_037138a2-9b47-11ea-a010-c71373fc244b.jpg", "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80", "https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" ] //index variable initially set to first image let index = 0; document.getElementById("page_1").src = map[index]; //forward button logic function forward() { index = (index + 1) % 3; document.getElementById("page_1").src = map[index]; } //backward button logic function back() { index = (index - 1 < 0) ? 2 : index - 1; document.getElementById("page_1").src = map[index]; } </script>