the images can't view properly

i've created some js codes to scrolling images on the page, but cannot view all images. the problem happened on google chrome. is there any solution? I'm including the js code and css to this.

data=[
[" images/img1.jpg"," Image1","pic01.jpg"],
[" images/img2.jpg","Image2 ","pic02.jpg"],
[" images/img3.jpg","Image3","pic03.jpg"],
[" images/img4.jpg","Image4","pic04.jpg"],
[" images/img5.jpg","Image5","pic05.jpg"],
[" images/img6.jpg","Image6","pic06.jpg"]

]

imgPlaces=5 // number of images visible
imgWidth=158 // width of the images
imgHeight=100 // height of the images
imgSpacer=2 // space between the images

dir=0 // 0 = left, 1 = right

newWindow=0 // 0 = Open a new window for links 0 = no  1 = yes

// ********** End User Defining Area **********

moz=document.getElementById&&!document.all

step=2
timer=""
speed=30
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initIMGSCROLL(){

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
document.getElementById("display_area").appendChild(newImg)
}

containerEL=document.getElementById("imgcontainer")
displayArea=document.getElementById("display_area")
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(){stopIMGSCROLL()}
displayArea.onmouseout=function(){scrollIMGSCROLL()}

imgPos= -pic0.width

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

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

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

if(dir==1){ // if right
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(){stopIMGSCROLL()}
nextPic++
}

scrollIMGSCROLL()
}

timer=""
function scrollIMGSCROLL(){
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("scrollIMGSCROLL()",speed)

}

function stopIMGSCROLL(){
clearTimeout(timer)
}

HTML:

<html>
<body onLoad="initIMGSCROLL()">
<script src="style/imgscrolling1.js">
</script>      

  <div id="col_slideshow">
     <div id="imgcontainer" style="position:relative; left:1px; right:0px; top:20px; width:60px; height:100px;overflow:hidden">
          <div id="display_area" style="position:absolute; left:0px; right:1px; top:0px; width:60px; height:100px; clip:rect(0,0,0,0)"> </div>
    </div>
             </div><!--col_slideshow-->
</body>
</html>

ansaurus

tags:

views:

answers:

the images can't view properly

related questions