Question

我正在尝试制作图片幻灯片。我将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";
}

Answer 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";
}

Answer 2

与Dacaspex一起回答，你应该记得回到图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";
}

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

2 个答案: