以前的功能不起作用

Question

我正在制作一个 javascript 幻灯片，但我不确定如何为每个图像添加标题，上一个按钮无法正常工作（两次或多次单击后不显示图像）我也将如何能够转到幻灯片的第一个和最后一个图像？

var index=4;
var titles=[1,2,3,4,5];


// LIST OF CAPTİONS
caption[0] = "Caption for the first image";
caption[1] = "Caption for the second image";
caption[2] = "Caption for the third image";
caption[3] = "Caption for the first image";
caption[4] = "Caption for the second image";
caption[5] = "Caption for the third image";

function NextSlide()
{
    if (index >= 5){index=0}
    var img = document.getElementById("img1");
    var slideName="images/img" + titles[index++] + ".jpg";
    img.src=slideName;
}

function PrevSlide()
{
    if (index >= 5){index=0}
    var img = document.getElementById("img1");
    var slideName="images/img" + titles[index--] + ".jpg"; img.src=slideName;
}
function last()
{
    index = 1;
}

Answer 1

下面的代码给出了一个示例，您可以如何实现 first() 和 last() 方法以及更改标题。您尚未提供任何 HTML，因此可能需要对其进行测试/调整以适应您所拥有的内容（例如，您需要添加 span 或 p 标记以包含 ID 为 caption1 的标题）

var index = 3;   // index for forth image as it's zero based

// List of captions
var captions  = ["Caption for the first image",
                 "Caption for the second image",
                 "Caption for the third image",
                 "Caption for the forth image",
                 "Caption for the fifth image",
                 "Caption for the sixth image"];

var slideShowImg = document.getElementById("img1");
var slideShowCaption = document.getElementById("caption1");

// Show current image
function showCurrentImage(){
    var slideName = "images/img" + (index + 1) + ".jpg";
    slideShowImg.src = slideName;
    slideShowCaption.innerText = captions[index];
}

// Move to next slide
function nextSlide()
{
    index++;
    if (index >= captions.length){ index = 0; }

    showCurrentImage();
}

// Move to previous slide
function prevSlide()
{
    index--;
    if (index < 0){ index = captions.length - 1; }

    showCurrentImage();
}

// Move to last slide
function last()
{
    index = captions.length - 1;

    showCurrentImage();
}

// Move to first slide
function first()
{
    index = 0;

    showCurrentImage();
}

HTML 可能类似于...

<div class="slide-show">
  <img src="#" id="img1" alt="" />
  <span id="caption1">Caption</span>
</div>

注意事项：

• 您的变量 titles 只是在索引中添加了一个，所以我删除了它并添加了内联。

• 我将字幕移到了一行中，而不是一个一个地定义。

• 将 getElementById("img1") 移出方法，因为它每次都会重复自己

• 创建 showCurrentImage() 来对页面进行更改，所有其他方法只需更改索引然后调用它

• 修复了 prevSlide() 中第一项的测试（看起来像是从 nextSlide() 复制而来的