JavaScript轮播图居中对齐配置问题求助

安全阿岳

2026-6-21

解决轮播图居中显示的问题

问题描述

我是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

修复步骤

修正HTML标签错误
脚本里rotateimages函数开头的标签写错了，把<left>改成<center>，这个标签用于让内部内容居中显示。
闭合缺失的引号
- 生成a标签时，target="' + ultimateshowCopy[currentslide][2] + '> 末尾缺少双引号，修改为target="' + ultimateshowCopy[currentslide][2] + '">
- document.write里的style属性末尾未闭合引号，修改为background-color:' + slidebgcolor + '"></div>'
给容器添加居中样式
给生成的slidedom容器添加margin: 0 auto;样式，让容器本身在页面中居中，同时给slidewidth补上px单位避免样式解析问题，修改后的document.write代码：
```
document.write('<div id="slidedom" style="width:' + slidewidth + 'px;height:' + slideheight + '; background-color:' + slidebgcolor + '; margin: 0 auto;"></div>')
```

完整修正后的脚本

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 = '<center>'
  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 + 'px;height:' + slideheight + '; background-color:' + slidebgcolor + '; margin: 0 auto;"></div>')

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

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

内容的提问来源于stack exchange，提问作者David Lytle

JavaScript轮播图居中对齐配置问题求助

问题描述 #

修复步骤 #

完整修正后的脚本 #

问题描述

修复步骤

完整修正后的脚本