Question

我的网站上有一个图像滑块，它似乎在IE，Firefox和Opera上运行良好。但它不适用于Chrome和Safari。（例如：http://tommy-design.nl/ari/index.php）

    <script type="text/javascript"> 
var data = [
["fotos/DSC_0055 (Large).JPG","Duitse herder","fotos/DSC_0055 (Large).JPG"],
["fotos/DSC_0154 (Large).JPG","Duitse herder","fotos/DSC_0154 (Large).JPG"],
["fotos/DSC_0194 (Large).JPG","Duitse herder","fotos/DSC_0194 (Large).JPG"],
["fotos/SSA41896 (Large).jpg","Duitse herder","fotos/SSA41896 (Large).jpg"],
["fotos/DSC_0143 (Large).JPG","Duitse herder","fotos/DSC_0143 (Large).JPG"]
]

imgPlaces = 4 
imgWidth = 230
imgHeight = 122 
imgSpacer = 0

dir = 0 

newWindow = 1


moz = document.getElementById &&! document.all

step = 1
timer = ""
speed = 10
nextPic = 0
initPos = new Array()
nowDivPos = new Array()

function initHIS3()
{
for (var i = 0;i < imgPlaces+1;i++)
{ 
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position = "absolute"
newImg.style.width=imgWidth + "px"
newImg.style.height=imgHeight + "px"
newImg.style.border = 0
newImg.alt =""
newImg.i = i
newImg.onclick = function()
{
his3Win(data[this.i][2])
}
document.getElementById("display").appendChild(newImg)
}

containerEL = document.getElementById("container1")
displayArea = document.getElementById("display")
pic0 = document.getElementById("pic_0")

containerBorder = (document.compatMode == "CSS1Compat"?0:parseInt(containerEL.style.borderWidth) * 2)
containerWidth = (imgPlaces * imgWidth) + ((imgPlaces - 1) * imgSpacer)
containerEL.style.width=containerWidth + (!moz?containerBorder:"") + "px"
containerEL.style.height=imgHeight + (!moz?containerBorder:"") + "px"

displayArea.style.width = containerWidth+"px"
displayArea.style.clip = "rect(0," + (containerWidth+"px") + "," + (imgHeight+"px") + ",0)"
displayArea.onmouseover = function()
{
stopHIS3()
}
displayArea.onmouseout = function()
{
scrollHIS3()
}

imgPos = - pic0.width

for (var i = 0;i < imgPlaces+1;i++)
{
currentImage = document.getElementById("pic_"+i)

if (dir === 0)
{
imgPos += pic0.width + imgSpacer
} 

initPos[i] = imgPos
if (dir === 0)
{
currentImage.style.left = initPos[i]+"px"
} 

if (dir === 1)
{ 
document.getElementById("pic_"+[(imgPlaces-i)]).style.left = initPos[i]+"px"
imgPos += pic0.width + imgSpacer
}

if (nextPic == data.length)
{
nextPic = 0
}

currentImage.src = data[nextPic][0]
currentImage.alt = data[nextPic][1]
currentImage.i = nextPic
currentImage.onclick = function()
{
his3Win(data[this.i][2])
}
nextPic++
}
scrollHIS3()
}

timer = ""
function scrollHIS3()
{
clearTimeout(timer)
for (var i = 0;i < imgPlaces+1;i++)
{
currentImage = document.getElementById("pic_"+i)

nowDivPos[i] = parseInt(currentImage.style.left)

if (dir === 0)
{
nowDivPos[i] -= step
}
if (dir === 1) 
{
nowDivPos[i] += step
}

if (dir === 0 && nowDivPos[i] <= -(pic0.width + imgSpacer) || dir == 1 && nowDivPos[i] > containerWidth)
{

if (dir === 0)
{
currentImage.style.left = containerWidth + imgSpacer + "px"
}
if (dir === 1)
{
currentImage.style.left = - pic0.width - (imgSpacer * 2) + "px"
}

if (nextPic > data.length-1)
{
nextPic = 0
}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i = nextPic
currentImage.onclick = function()
{
his3Win(data[this.i][2])
}

nextPic++
}
else
{
currentImage.style.left=nowDivPos[i] + "px"
}

}
timer = setTimeout("scrollHIS3()",speed)
}

function stopHIS3()
{
clearTimeout(timer)
}

function his3Win(loc)
{
if(loc === "")
{
return
}
if(newWindow === 0)
{
location = loc
}
else
{
newin = window.open(loc,'win1','left = 430,top = 340,width = 300 ,height = 300')  
newin.focus()
}
}
   </script>

我几乎100％确定问题出在数组中，但我似乎无法弄清楚究竟是什么问题..

提前致谢。：）

Answer 1

尝试使用

 position:relative;

并将第一个从左向右/从右向左移动（其他人将相应地跟随，因为相对将告诉他们跟随第一个图像）

。我很确定那将开始研究chrome。因为相对位置告诉它使用不同的位置。打开你的滑块我在chrome控制台中发现了一些错误：它们都有相同的左边：那就是一起改变。

Javascript数组（图像滑块）（Webkit中的错误？）

1 个答案: