It is a simple and very small Image Fading Script.
View and Download
----------------------------------------------------------------
<html><head>
<script>
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
// Developed By : oneTarek
// http://www.tshame.com
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,200);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
</script>
<style type="text/css">#imageContainer {
position:relative;
margin:auto;
width:230px;
border:1px solid #000;
}
/* styles unrelated to the application follow */
h1 {
position:relative;
font:1em verdana;
}
body{background:#444444}
.copy {
width:500px;
margin:auto;
position:relative;
font:0.9em verdana;
}
#so_credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}
#so_credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
#imageContainer {
height:147px;
width:222px;
}
#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
border:10px solid #eeeeee;
}
</style>
</head>
<body>
<h1 style="text-align:center; color:#FFFFFF">Image Cross Fader Redux</h1>
<div id="imageContainer">
<img src="img1.jpg" width="200" height="124" alt="Image 1" />
<img src="img2.jpg" width="200" height="124" alt="Image 2" />
<img src="img3.jpg" width="200" height="124" alt="Image 3" />
<img src="onetarek.png" width="200" height="124" alt="oneTarek" />
</div>
<div style=" text-align:center;">
Download The Zip File of This Code
</div>
<!-- Autor informaion ------------------------------------>
<hr />
<div style="color:#FFFFFF; font-size:24px; width:550px;">
<div style="float:left">
- Author : oneTarek
- Email : onetarek@gmail.com
- Phone : +8801190881620
</div>
<div style="float:right">
<img src="onetarek.png"/>
</div>
</div>
</body></html>