Javascript 以前的功能不工作

我正在制作一个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;
}

---

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

span

或

p

标记，以包含ID为

caption1

的标题）

var指数=3；//第四个图像的索引，因为它是基于零的
//标题列表
var captions=[“第一幅图像的标题”，
“第二幅图像的标题”，
“第三幅图像的标题”，
“第四幅图像的标题”，
“第五幅图像的标题”，
“第六幅图像的标题”]；
var slideShowImg=document.getElementById（“img1”）；
var slideShowCaption=document.getElementById（“caption1”）；
//显示当前图像
函数showCurrentImage（）{
var slideName=“images/img”+（索引+1）+“.jpg”；
slideShowImg.src=slideName；
slideShowCaption.innerText=字幕[索引]；
}
//转到下一张幻灯片
函数nextSlide（）
{
索引++；
如果（index>=captions.length）{index=0；}
showCurrentImage（）；
}
//移到上一张幻灯片
函数prevSlide（）
{
索引--；
如果（索引<0）{index=captions.length-1；}
showCurrentImage（）；
}
//移到最后一张幻灯片
函数last（）
{
索引=标题。长度-1；
showCurrentImage（）；
}
//移到第一张幻灯片
函数优先（）
{
指数=0；
showCurrentImage（）；
}

HTML可能类似于

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

说明文字

注:

• 您的变量

  titles

  只是在索引中添加了一个，所以我删除了它并添加了内联

• 我把标题移到一行，而不是一行一行地定义

• 将getElementById（“img1”）移出该方法，因为它每次只是重复自身

• 创建showCurrentImage（）来更改页面，所有其他方法只需更改索引，然后调用

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

---

哪里定义了

标题

呢？当您调用

Prevsile

时，您永远不会检查是否小于零。感谢您的建议，我的HTML代码是这样的“

”。但是，显示图像的最佳方式是什么？不确定您的问题是什么？您已经知道了通过

img

标签让图像显示正常，不是吗？如果你的意思是视觉上看一下其他幻灯片库是如何工作的，特别是像预加载下一个图像和从一个图像到下一个图像的淡入淡出过渡。我在不同的浏览器中查看和上载页面时遇到问题。这是“slideShowImg.src=slideName；”部分，我得到“未捕获类型错误：无法将属性'src'设置为null”这意味着

slideShowImg

为null，这意味着它在DOM中找不到图像。怀疑您的代码中某处有输入错误。检查

IMG

标记上的id和

getElementById（）

part以确保它们看起来正确。否则，您可能需要发布代码链接或询问其他问题。我检查了它，发现了任何问题。

var slideShowImg=document.getElementById（“img1”）；var slideShowCaption=document.getElementById（“caption1”）；//Show current image函数showCurrentImage（）{var slideName=“images/img”+（index+1）+“.jpg”；slideShowImg.src=slideName；slideShowCaption.innerText=captions[index]；}”，下面是HTML

字幕`

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