Javascript数组(图像滑块)(Webkit中的bug ?)
Javascript arrays (Image slider)(bug in Webkit?)
我在我的网站上有一个图像滑块,它似乎在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%肯定问题出在数组上,但我似乎不知道问题到底出在哪里。
提前感谢。:)
尝试使用
position:relative;
并将第一张图像从左移到右/从右移到左(其他图像将相应地跟随,因为相对会告诉它们跟随第一张图像)
。我很确定,这将开始在chrome工作,然后。相对位置告诉它使用不同的位置。当打开你的滑块时,我发现chrome控制台有一些bug:它们都有相同的left:这是一起改变的
相关文章:
- webkit中的自动滚动转盘
- setInterval 在 webkit 浏览器中的行为很奇怪
- 如何使用 WebKit 调用 JavaScript 中的C++函数
- 支持Opera中的webkit SpeechRecognition API
- webkit浏览器中的复选框问题
- 添加的接口中的任何方法都没有使用 @android.webkit.JavascriptInterface 进行注释;它们
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- Chrome 中的 Webkit 动画迭代计数错误
- 将画布保存到 Node-webkit 中的磁盘
- Node-webkit 中的音频使用 node js 和 Web Audio API
- 是否有一种非闪存方法来设置/获取 WebKit 中的剪贴板数据
- webkit中的CSS动画在自动之前为零
- 节点webkit中的Require('jquery ui')产生navigator not found错
- 刷新node-webkit中的外部浏览器窗口
- ios webkit中的Touchend事件没有触发
- Javascript数组(图像滑块)(Webkit中的bug ?)
- 确定webkit中的窗口是否处于活动状态
- Webkit中的递归图像滑块失败
- Webkit 中的 JavaScript 错误
- 如何防止iOS webkit中的JS模糊事件,当虚拟键盘被驳回