Hi,
In this scenario it is better to go with jquery as it has some cool effects for the DOM elements.However, if jquery cannot be used then below solution can be used.
<html>
<head></head>
<body>
<img id="image1">
<script>
var imgArray1 = [
'paintings/01.jpg',
'paintings/02.jpg',
'paintings/03.jpg',
'paintings/04.jpg'],
curIndex1 = 0,
imgFadeInDuration= 2500,imgFadeOutDuration= 2500, currentImage = document.getElementById('image1');
function slideShow1() {
currentImage.src = imgArray1[curIndex1];
setOpacity(25);
curIndex1++;
if (curIndex1 == imgArray1.length) { curIndex1 = 0; }
setTimeout("slideShow1()", imgFadeInDuration + imgFadeOutDuration);
fadeIn();
}
slideShow1();
function fadeOut(){
setTimeout(function() {
setOpacity(75);
setTimeout(function() {
setOpacity(50);
setTimeout(function() {
setOpacity(25);
setTimeout(function() {
setOpacity(12);
}, imgFadeOutDuration / 16);
}, imgFadeOutDuration / 8);
}, imgFadeOutDuration / 4);
}, imgFadeOutDuration / 2);
}
function fadeIn(){
setTimeout(function() {
setOpacity(25);
setTimeout(function() {
setOpacity(50);
setTimeout(function() {
setOpacity(75);
setTimeout(function() {
setOpacity(100);
fadeOut();
}, imgFadeOutDuration / 16);
}, imgFadeOutDuration / 8);
}, imgFadeOutDuration / 4);
}, imgFadeOutDuration / 2);
}
function setOpacity(value){
currentImage.style.opacity = ""+(value/100);
currentImage.style.filter= "alpha(opacity="+value+")";
}
</script>
</img></body>
</html>
Thanks