These thumbnails act as a visual reference for the images used in this example and are not part of the script or layout
Manual slideshow
These thumbnails act as a visual reference for the images used in this example and are not part of the script or layout
To add more images just add to the array.
<script type="text/javascript">
<!--
// jeff
// www.huntingground.freeserve.co.uk
ss1Arr=[
"image062.jpg",
"image064.jpg",
"image000.jpg",
"image001.jpg",
"image003.jpg",
"image004.jpg" // no comma at end of last index
]
spacer=1
speed=15
function initSS1(){
container=document.getElementById("cont")
elOne=document.getElementById("pic_one")
elTwo=document.getElementById("pic_two")
elTwo.style.visibility="hidden"
elOne.src=ss1Arr[0]
running=0
dir="left"
aniLeft=""
aniRight=""
nextPic=0
divNum=1
runRate=50
initSS1L() // start on load
}
function initSS1L(){
if(dir=="right"&&running==1){
running=0
return
}
if(running==1){return}
running=1
if(dir=="right"){
nextPic+=2
if(nextPic>=ss1Arr.length){nextPic=0}
if(divNum==1){
elOne.src=ss1Arr[nextPic]
elOne.style.left=container.offsetWidth+spacer
elOne.style.top=0
}
if(divNum==2){
elTwo.src=ss1Arr[nextPic]
elTwo.style.left=container.offsetWidth+spacer
elTwo.style.top=0
}
}
dir="left"
moveSS1L()
}
function moveSS1L(){
if(divNum==1){
elPos=parseInt(elOne.style.left)
elOne.style.zIndex=2
}
else{
elPos=parseInt(elTwo.style.left)
elTwo.style.zIndex=2
}
elPos-=speed
aniLeft=setTimeout("moveSS1L()",runRate)
if(divNum==1){
elOne.style.left=elPos
elTwo.style.left=elPos-container.offsetWidth-spacer
if(elPos<=0){
elOne.style.left=0
elOne.style.zIndex=""
elTwo.style.left=container.offsetWidth+spacer
elTwo.style.visibility="visible"
nextPic++
if(nextPic>=ss1Arr.length){nextPic=0}
elTwo.src=ss1Arr[nextPic]
clearTimeout(aniLeft)
if(running==1){running=0}
divNum=2
}
}
else{
elTwo.style.left=elPos
elOne.style.left=elPos-container.offsetWidth-spacer
if(elPos<=0){
elTwo.style.left=0
elTwo.style.zIndex=""
elOne.style.left=container.offsetWidth+spacer
nextPic++
if(nextPic>=ss1Arr.length){nextPic=0}
elOne.src=ss1Arr[nextPic]
clearTimeout(aniLeft)
if(running==1){running=0}
divNum=1
}
}
}
function initSS1R(){
if(dir=="left"&&running==1){
running=0
return
}
if(running==1){return}
running=1
if(dir=="left"){
nextPic-=2
/* if moving left and stopped on last image then right dir chosen nextPic has passed pic.length and is reset to 0
additional step back is require to show correct image */
if(nextPic== -2){nextPic=ss1Arr.length-2} // additional step back
if(nextPic<0){nextPic=ss1Arr.length-1}
if(divNum==1){
elOne.src=ss1Arr[nextPic]
elOne.style.left= -container.offsetWidth
elOne.style.top=0
divNum=1
}
if(divNum==2){
elTwo.src=ss1Arr[nextPic]
elTwo.style.left= -container.offsetWidth
elTwo.style.top=0
divNum=2
}
}
dir="right"
moveSS1R()
}
function moveSS1R(){
if(divNum==1){
elPos=parseInt(elOne.style.left)
elOne.style.zIndex=2
}
else{
elPos=parseInt(elTwo.style.left)
elTwo.style.zIndex=2
}
elPos+=speed
aniRight=setTimeout("moveSS1R()",runRate)
if(divNum==1){
elOne.style.left=elPos
elTwo.style.left=elPos+container.offsetWidth
if(elPos>=0){
elOne.style.left=0
elOne.style.zIndex=""
elTwo.style.left= -container.offsetWidth
nextPic--
if(nextPic<0){nextPic=ss1Arr.length-1}
elTwo.src=ss1Arr[nextPic]
clearTimeout(aniRight)
if(running==1){running=0}
divNum=2
}
}
else{
elTwo.style.left=elPos
elOne.style.left=elPos+container.offsetWidth
if(elPos>=0){
elTwo.style.left=0
elTwo.style.zIndex=""
elOne.style.left= -container.offsetWidth
nextPic--
if(nextPic<0){nextPic=ss1Arr.length-1}
elOne.src=ss1Arr[nextPic]
clearTimeout(aniRight)
if(running==1){running=0}
divNum=1
}
}
}
// add onload="initSS1()" to the opening BODY tag
// -->
</script>
<div id="cont" style="position:relative;width:210px; height:120px;overflow:hidden;border:1px dotted #8e8462;clip:rect(0,210,120,0)">
<img src="" id="pic_one" style="position:absolute; left:0px; top:0px;width:210px;height:120px" alt="1">
<img src="" id="pic_two" style="position:absolute; left:100px; top:0px;width:210px;height:120px" alt="2">
</div>
<input type="button" value="<<<" onclick="initSS1R()">
<input type="button" value=">>>" onclick="initSS1L()">