The current image fades out as the next image scrolls in.
The images can be any size and can also be set to display at a percentage of their default size.
The value of variable imageSize sets the size of the image as a percentage of the original image size this applies to all the images.
My example is showing the images at 70% of their default size.
The display area is dynamically sized to the size of the largest image width and largest image height as set by variable imageSize
<HTML>
<HEAD>
<TITLE>Slideshow 3</TITLE>
<script type="text/javascript">
ss3Arr=[
"pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg",
"pic06.jpg","pic07.jpg","pic08.jpg","pic09.jpg","pic10.jpg",
"pic11.jpg","pic12.jpg","pic13.jpg","pic14.jpg","pic15.jpg",
"pic16.jpg","pic17.jpg","pic18.jpg","pic19.jpg","pic20.jpg"
]
imageSize=70 // % size the large image is shown at
pause=4
preload=[]
largestW=0
largestH=0
for(var i=0;i<ss3Arr.length;i++){
preload[i]=new Image()
preload[i].src=ss3Arr[i]
if(preload[i].width>largestW){largestW=preload[i].width}
if(preload[i].height>largestH){largestH=preload[i].height}
}
function initss3(){
n=0
speed=10
picCount=0
ss3Div=document.getElementById("slds3container")
ss3Pic1=document.getElementById("slds3pic0")
ss3Pic2=document.getElementById("slds3pic1")
divBorder=0
if(document.uniqueID&&ss3Pic1.currentStyle){
picBorder=parseInt(ss3Pic1.currentStyle.borderWidth)*2
divBorder=parseInt(ss3Div.currentStyle.borderWidth)*2
}
else{
picBorder=parseInt(document.defaultView.getComputedStyle(ss3Pic1, '').getPropertyValue("border-top-width"))*2
}
ss3Div.style.width=(largestW/100*imageSize)+picBorder+divBorder+"px"
ss3Div.style.height=(largestH/100*imageSize)+picBorder+divBorder+"px"
ss3Pic1.style.left=ss3Div.style.width
ss3Pic2.style.left=ss3Div.style.width
for(var i=0;i<2;i++){
window["ss3Obj"+i]=new createss3("slds3pic"+i)
}
window['ss3Obj0'].chkStatus(0)
}
function createss3(id){
this.pic=document.getElementById(id)
this.timer=null
this.timer2=null
this.chkStatus=function(num){
this.pic.src=ss3Arr[picCount]
this.pic.style.left=ss3Div.style.width
this.pic.style.width=preload[picCount].width/100*imageSize+"px"
this.pic.style.height=preload[picCount].height/100*imageSize+"px"
this.opac=100
if(this.pic.filters){this.pic.filters.alpha.opacity=this.opac}
else{this.pic.style.opacity=(this.opac/100)}
this.pic.style.marginTop=(parseInt(ss3Div.style.height)-this.pic.offsetHeight)/2-(divBorder/2)+"px"
this.stop=(parseInt(ss3Div.style.width)-this.pic.offsetWidth)/2
this.pos=parseInt(this.pic.style.left)
this.startPos=this.pos
fadeStep=Math.ceil(100/((this.pic.offsetWidth+this.stop)/speed))
picCount++
if(picCount==ss3Arr.length){
picCount=0
}
window["ss3Obj"+num].animate('ss3Obj'+num)
}
this.animate=function(currentObj){
this.pic.style.zIndex=10
this.pos-= speed
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",10)
if(this.pos<this.stop-(divBorder/2)){
this.pos=this.stop-(divBorder/2)
clearTimeout(this.timer)
this.pic.style.zIndex=5
if(n==0){n=1}
else{n=0}
setTimeout(currentObj+".fadeMe('"+currentObj+"')",pause*1000)
setTimeout("window['ss3Obj'+n].chkStatus(n)",pause*1000)
}
this.pic.style.left=this.pos+"px"
}
this.fadeMe=function(cObj){
this.opac-=fadeStep
this.timer2=setTimeout(cObj+".fadeMe('"+cObj+"')",10)
if(this.opac<0){
this.opac=0
clearTimeout(this.timer2)
}
if(this.pic.filters){this.pic.filters.alpha.opacity=this.opac}
else{
this.pic.style.opacity=(this.opac/100)-0.01
}
}
}
// add onload="initss3()" to the opening BODY tag
</script>
<style type="text/css">
#slds3container{
position:relative;
width:700px;
height:375px;
border:5px solid black;
text-align:center;
overflow:hidden;
background-color:#333333
}
.clss2{
position:absolute;
border:5px solid #ffffff;
z-index:5;
opacity:1;
display:block
}
</style>
<!--[if IE]>
<style type="text/css">
.clss2{
cursor:hand;
filter:alpha(opacity=100);
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initss3()">
<h1>Slideshow 3</h1>
<DIV id="slds3container">
<img id="slds3pic0" src="blank.gif" alt="" class="clss2">
<img id="slds3pic1" src="blank.gif" alt="" class="clss2">
</DIV>
</BODY>
</HTML>