如何让这个 JavaScript 幻灯片工作？答案

【问题标题】：How do I get this JavaScript slideshow to work?如何让这个 JavaScript 幻灯片工作？
【发布时间】：2015-12-16 04:56:09
【问题描述】：

我正在尝试创建图像幻灯片。我将 7 个图像添加到数组中。幻灯片以 image0.jpg 开头，当用户单击右箭头时，我希望 javascript 将下一个图像插入数组 (image1.jpg)。问题是 img 变量没有超过 1。有人可以帮我让这个幻灯片工作吗？

HTML

    <h1>Swap Image Experiment</h1>
    <div class="slideshow">
        <div id="myImages">
            <img id="test" src="images/image0.jpg">
        </div>
        <div class="arrows"> 
            <div id="left"  onClick="swapPicture(-1)"></div>
            <div id="right" onClick="swapPicture(+1)"></div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>

JavaScript

var dImages = new Array();
var numImages = 6;

for(i=0;i<numImages;i++)
{
    dImages[i]=new Image();
    dImages[i].src="images/image"+(i)+".jpg";
}

function swapPicture(target) {
    img = 0;
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    image.src = "images/image"+(img)+".jpg";
}

【问题讨论】：

标签： javascript html

【解决方案1】：

您应该将img 从局部变量更改为全局变量。现在每次执行该函数时，img 都会设置为 0。所以将其更改为

var img = 0;
function swapPicture(target) {
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    image.src = "images/image"+(img)+".jpg";
}

【讨论】：

谢谢！这修复了它:)

【解决方案2】：

随着 Dacaspex 的回答，如果它们向左而不是向右，您应该记住循环回 pic 5（假设您的 6 张图像为 0-5）。如果它们在 5 时正确，也循环到 0...

var img = 0;
function swapPicture(target) {
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    if(img < 0)
    {
       img = 5;
    }
    else
    {
       if(img > 5)
       {
          img = 0;
       }
    }
    image.src = "images/image"+(img)+".jpg";
}

【讨论】：

谢谢 :) 这是我的下一步！