Gå til innhold

Hvordan få denne html/js slideshowen til å stoppe på siste slide?


Anbefalte innlegg

Heisann! Har et enkelt script som tar bilder i en mappe og kjører gjennom de i en slideshow, som går i en loop. Jeg vil dog at den skal stoppe på siste slide. Hvordan kan jeg få det til? Dette er ikke min kode, og jeg er ganske noob, så, dette må jeg gjerne få inn med teskje. 

Håper noen kan hjelpe en stakkars! 

 

Quote

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  //console.log(a);
  return a;
}

// [0, max)
function randomizeTick(max) {
  tick = Math.floor(Math.random() * max);
}

// setup image src strings
let images = imageNamesStr.split("\n");
images.shift();
images.pop();
for (let i = images.length - 1; i >= 0; i--) {
  // remove js, sh, or directory
  let remove = images[i].includes(".js") || images[i].includes(".sh") || !images[i].includes(".") || images[i].includes(".git");
  if (remove) {
    images.splice(i, 1);
  }
}

// setup indexes for shuffling
let indexes = new Array();
for (let i = 0; i < images.length; i++) {
  images[i] = "images/" + images[i];
  indexes.push(i);
}

// init img elements
let topImage = document.createElement("img");
let botImage = document.createElement("img");
let imageContainer = document.getElementById("imageContainer");
imageContainer.appendChild(topImage);
imageContainer.appendChild(botImage);
topImage.id = "topImage";
botImage.id = "botImage";

// prevent white outline by setting initial transparency
topImage.style.opacity = "0.0";
botImage.style.opacity = "0.0";

//set init image
let tick = 0;
if (mode === 0) {
  shuffle(indexes);
}

//randomize tick
if (mode === 2) {
  randomizeTick(images.length);
}

let fadeDuration = slideDuration * 0.25;

function slideshow() {
  //let fadeDuration = 500;

  $("#botImage").animate({
    opacity: 1.0
  }, {
    duration: fadeDuration
  });

  $("#topImage").animate({ //properties
    opacity: 0
  }, { //options
    duration: fadeDuration,
    done: function() {
      if (tick === images.length - 1) { //reset
        if (mode === 0) {
          shuffle(indexes);
        } else if (mode === 2) {
          randomizeTick(images.length);
        }
        tick = 0;
      } else {
        tick++;
      }

      topImage.src = botImage.src;
      topImage.style.opacity = "1.0";
      botImage.src = images[indexes[tick]];
      botImage.style.opacity = "0.0";
    }
  });
}

if (images.length > 0) {
  botImage.src = images[indexes[tick]];
  botImage.style.opacity = "0.0";

  //initial fade in
  $("#botImage").animate({
    opacity: 1.0
  }, {
    duration: fadeDuration
  });

  $("#topImage").animate({
    opacity: 0
  }, {
    duration: fadeDuration
  });

  if (images.length > 1) {
    slideshow();
    setInterval(slideshow, slideDuration);
  }
}

 

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...