Javascript 幻灯片对齐

Question

美好的一天。 首先，我在 Javascript 方面是个菜鸟，所以，我很感谢您能够提供的任何帮助。 我的问题应该不难解决。 我只是想将幻灯片显示在网页的中心。 您将在我的测试页此处看到它是左对齐的。 我不确定从哪里开始或者脚本的哪一部分来配置它。 再次感谢您的帮助。 以下是我正在使用的脚本：

var ultimateshow = new Array()

ultimateshow[0] = ['https://i.imgur.com/dF7w0Lc.png', 'https://www.alphatournamentcompany.com/', '_new']
ultimateshow[1] = ['https://i.imgur.com/OzBBtKk.jpg', 'https://weekendhockey.com/upcoming-tournaments/', '_new']
ultimateshow[2] = ['https://i.imgur.com/iZketaT.png', 'https://onehockey.com/our-events', '_new']
ultimateshow[3] = ['https://i.imgur.com/GJdRG2Z.jpg', 'https://www.lakeeffecthockey.com/', '_new']
ultimateshow[4] = ['https://i.imgur.com/SH0YSb0.jpg', 'https://grinderhockey.com/', '_new']
ultimateshow[5] = ['https://i.imgur.com/QvhdlZt.png', 'https://powersk8r.com/', '_new']
ultimateshow[6] = ['https://i.imgur.com/cU6VcpL.png', 'https://www.nickelcityhockey.com/', '_new']
ultimateshow[7] = ['https://i.imgur.com/ZIC8ELG.jpg?1', 'https://www.black-biscuit.com/', '_new']
ultimateshow[8] = ['https://i.imgur.com/Yjh80fq.jpg?1', 'https://www.ministicks.com/', '_new']
ultimateshow[9] = ['https://i.imgur.com/BoCHofu.png', 'https://allblackhockeysticks.com/', '_new']
ultimateshow[10] = ['https://i.imgur.com/9GrkCjQ.jpg', 'https://stinkylockers.com/', '_new']
ultimateshow[11] = ['https://i.imgur.com/rTsRxsI.jpg', 'https://justhockeyjerseys.com/', '_new']
ultimateshow[12] = ['https://i.imgur.com/J7kQnIJ.jpg', 'https://www.chehockey.com/', '_new']
ultimateshow[13] = ['https://i.imgur.com/oC17NS7.png', 'https://niagaratournaments.com/', '_new']
ultimateshow[14] = ['https://i.imgur.com/Mmd1IL8.png', 'https://www.planethockey.com/', '_new']
ultimateshow[15] = ['https://i.imgur.com/PePqj14.png', 'https://www.holidayrinks.com/pepsi-tournament', '_new']

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

var slidedelay = 9000

var ie = document.all
var dom = document.getElementById
var curcycle = 0

if (preloadimages == "yes") {
  for (i = 0; i < ultimateshow.length; i++) {
    var cacheimage = new Image()
    cacheimage.src = ultimateshow[i][0]
  }
}

var currentslide = 0

function randomize(targetarray) {
  ultimateshowCopy = new Array()
  var the_one
  var z = 0
  while (z < targetarray.length) {
    the_one = Math.floor(Math.random() * targetarray.length)
    if (targetarray[the_one] != "_selected!") {
      ultimateshowCopy[z] = targetarray[the_one]
      targetarray[the_one] = "_selected!"
      z++
    }
  }
}

if (randomorder == "yes")
  randomize(ultimateshow)
else
  ultimateshowCopy = ultimateshow

function rotateimages() {
  curcycle = (currentslide == 0) ? curcycle + 1 : curcycle
  ultcontainer = '<left>'
  if (ultimateshowCopy[currentslide][1] != "")
    ultcontainer += '<a href="' + ultimateshowCopy[currentslide][1] + '" target="' + ultimateshowCopy[currentslide][2] + '">'
  ultcontainer += '<img src="' + ultimateshowCopy[currentslide][0] + '" border="0">'
  if (ultimateshowCopy[currentslide][1] != "")
    ultcontainer += '</a>'
  ultcontainer += '</center>'
  if (ie || dom)
    crossrotateobj.innerHTML = ultcontainer
  if (currentslide == ultimateshow.length - 1) currentslide = 0
  else currentslide++
    if (curcycle == parseInt(slidecycles) && currentslide == 0)
      return
  setTimeout("rotateimages()", slidedelay)
}

if (ie || dom)
  document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + '; background-color:' + slidebgcolor + '"></div>')

function start_slider() {
  crossrotateobj = dom ? document.getElementById("slidedom") : document.all.slidedom
  rotateimages()
}

if (ie || dom)
  window.onload = start_slider

Answer 1

这是 21 世纪的版本。 使用 Flex 居中，我删除了遗留代码

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';
  document.body.appendChild(slideContainer);
};

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