Javascript數組（圖片滑塊）（Webkit中的bug？）

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控制檯中有一些錯誤：它們都有相同的左邊：即一起改變。