开发者

Javascript arrays (Image slider)(bug in Webkit?)

开发者 https://www.devze.com 2023-03-23 18:11 出处:网络
I\'ve got a image slider on my website, it seems to work fine on IE, Firefox and Opera. But it doesn\'t work on Chrome and Safari. (Example: http://tommy-design.nl/ari/index.php)

I've got a image slider on my website, it seems to work fine on IE, Firefox and Opera. But it doesn't work on Chrome and Safari. (Example: 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.setAttribu开发者_JS百科te("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>

I'm almost 100% sure that the problem lies in the array, but I can't seem to figure out what exactly the problem is..

Thanks in advance. :)


Try to use

 position:relative; 

and moving the first one from left to right / right to left(the others will follow accordingly as relative will tell em to follow the first image )

. i am pretty sure that that will start working on chrome then. as relative position tells it to use different positions. while opening your slider i found some bugs in chrome console : they all have the same left: thats getting changed together.

0

精彩评论

暂无评论...
验证码 换一张
取 消