Vorherige Funktion funktioniert nicht - Javascript, HTML, Arrays, Diashow

Ich arbeite an einer Javascript-Diashow, aber ich bin es nichtWenn Sie sicher sind, dass jedem Bild eine Beschriftung hinzugefügt werden soll, funktioniert die vorherige Schaltfläche nicht ordnungsgemäß (nach zwei oder mehr Klicks wird kein Bild angezeigt). Wie kann ich auch zum ersten und letzten Bild der Folien wechseln?

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

Antworten:

Der folgende Code gibt ein Beispiel, wie Sie könntenImplementieren Sie die Methoden first () und last () und ändern Sie die Beschriftung. Sie haben kein HTML angegeben, daher muss es möglicherweise getestet / angepasst werden, um mit dem übereinzustimmen, was Sie haben (z. B. müssen Sie ein HTML hinzufügen span oder p Tag, um die Beschriftung mit der ID von zu enthalten 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 könnte so etwas wie ... sein

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

Anmerkungen:

• Deine Variable titles fügte gerade einen zum Index hinzu, also entfernte ich diesen und fügte Inline hinzu.

• Ich habe Untertitel in eine einzelne Zeile verschoben, anstatt sie einzeln zu definieren.

• GetElementById ("img1") wurde aus der Methode entfernt, da sie sich jedes Mal wiederholt

• ShowCurrentImage () wurde erstellt, um die Änderungen an der Seite vorzunehmen. Alle anderen Methoden ändern einfach den Index und rufen diesen auf

• Der Test für das erste Element in prevSlide () wurde korrigiert (es sah so aus, als ob es von nextSlide () kopiert wurde.