Javascript幻灯片对齐

const ultimateshow = [
  ['https://i.imgur.com/dF7w0Lc.png', 'https://www.alphatournamentcompany.com/', '_new'],
  ['https://i.imgur.com/OzBBtKk.jpg', 'https://weekendhockey.com/upcoming-tournaments/', '_new'],
  ['https://i.imgur.com/iZketaT.png', 'https://onehockey.com/our-events', '_new'],
  ['https://i.imgur.com/GJdRG2Z.jpg', 'https://www.lakeeffecthockey.com/', '_new'],
  ['https://i.imgur.com/SH0YSb0.jpg', 'https://grinderhockey.com/', '_new'],
  ['https://i.imgur.com/QvhdlZt.png', 'https://powersk8r.com/', '_new'],
  ['https://i.imgur.com/cU6VcpL.png', 'https://www.nickelcityhockey.com/', '_new'],
  ['https://i.imgur.com/ZIC8ELG.jpg?1', 'https://www.black-biscuit.com/', '_new'],
  ['https://i.imgur.com/Yjh80fq.jpg?1', 'https://www.ministicks.com/', '_new'],
  ['https://i.imgur.com/BoCHofu.png', 'https://allblackhockeysticks.com/', '_new'],
  ['https://i.imgur.com/9GrkCjQ.jpg', 'https://stinkylockers.com/', '_new'],
  ['https://i.imgur.com/rTsRxsI.jpg', 'https://justhockeyjerseys.com/', '_new'],
  ['https://i.imgur.com/J7kQnIJ.jpg', 'https://www.chehockey.com/', '_new'],
  ['https://i.imgur.com/oC17NS7.png', 'https://niagaratournaments.com/', '_new'],
  ['https://i.imgur.com/Mmd1IL8.png', 'https://www.planethockey.com/', '_new'],
  ['https://i.imgur.com/PePqj14.png', 'https://www.holidayrinks.com/pepsi-tournament', '_new']
];

const slidewidth = "850px"; //set to width of LARGEST image in your slideshow
const slideheight = "475px"; //set to height of LARGEST image in your slideshow
const slidecycles = "continuous"; //number of cycles before slideshow stops (ie: "2" or "continuous")
const randomorder = "yes"; //randomize the order in which images are displayed? "yes" or "no"
const preloadimages = "yes"; //preload images? "yes" or "no"
const slidebgcolor = 'white';

const slidedelay = 9000;

let curcycle = 0;
let currentslide = 0;

if (preloadimages === "yes") {
  ultimateshow.forEach(item => {
    const cacheimage = new Image();
    cacheimage.src = item[0];
  });
}

const randomize = (targetArray) => {
  let ultimateshowCopy = [];
  let z = 0;
  while (z < targetArray.length) {
    const the_one = Math.floor(Math.random() * targetArray.length);
    if (targetArray[the_one] !== "_selected!") {
      ultimateshowCopy[z] = targetArray[the_one];
      targetArray[the_one] = "_selected!";
      z++;
    }
  }
  return ultimateshowCopy;
};

const ultimateshowCopy = (randomorder === "yes") ? randomize([...ultimateshow]) : ultimateshow;

const createSlideContainer = () => {
  const slideContainer = document.createElement('div');
  slideContainer.id = 'slidedom';
  slideContainer.style.width = slidewidth;
  slideContainer.style.height = slideheight;
  slideContainer.style.backgroundColor = slidebgcolor;
  slideContainer.style.display = 'flex';
  slideContainer.style.justifyContent = 'center';
  slideContainer.style.alignItems = 'center';
  
  // Center the slide container on the page
  slideContainer.style.position = 'absolute';
  slideContainer.style.top = '50%';
  slideContainer.style.left = '50%';
  slideContainer.style.transform = 'translate(-50%, -50%)';
  
  document.body.appendChild(slideContainer);
};

document.body.style.display = 'flex';
document.body.style.justifyContent = 'center';
document.body.style.alignItems = 'center';
document.body.style.height = '100vh';
document.body.style.margin = '0';


const rotateimages = () => {
  curcycle = (currentslide === 0) ? curcycle + 1 : curcycle;
  const slideContainer = document.getElementById('slidedom');
  slideContainer.innerHTML = ''; // Clear the container
  const imgElement = document.createElement('img');
  imgElement.src = ultimateshowCopy[currentslide][0];
  imgElement.style.border = '0';
  
  if (ultimateshowCopy[currentslide][1] !== "") {
    const linkElement = document.createElement('a');
    linkElement.href = ultimateshowCopy[currentslide][1];
    linkElement.target = ultimateshowCopy[currentslide][2];
    linkElement.appendChild(imgElement);
    slideContainer.appendChild(linkElement);
  } else {
    slideContainer.appendChild(imgElement);
  }

  currentslide = (currentslide === ultimateshow.length - 1) ? 0 : currentslide + 1;
  if (curcycle === parseInt(slidecycles) && currentslide === 0) return;
  setTimeout(rotateimages, slidedelay);
};

const start_slider = () => {
  createSlideContainer();
  rotateimages();
};

window.addEventListener('load', start_slider);