Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone. I was wondering if anyone knows an easy way to add a fade in / fade out to this slideshow? It has to be in js only, no css. This is used in multiple places on the same page, so if anything needs unique names, please be specific. Thanks in advance!

<img id="image1">
<script>
var imgArray1 = [
'images/someimage.jpg',
'images/someimage.jpg',
'images/someimage.jpg',
'images/someimage.jpg'],
curIndex1 = 0;
imgDuration1= 2500;

function slideShow1() {
document.getElementById('image1').src = imgArray1[curIndex1];
curIndex1++;
if (curIndex1 == imgArray1.length) { curIndex1 = 0; }
setTimeout("slideShow1()", imgDuration1);
}
slideShow1();
</script>
Posted
Updated 22-Nov-14 11:13am
v2
Comments
Can't you use jQuery?

1 solution

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
<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(){
//Summary
//Simulate fadeout effect 
	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(){
//Summary
//Simulate fadeIn effect 
	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){
//summary
//Set the opacity for the image
	currentImage.style.opacity = ""+(value/100); // Chrome & FF
	currentImage.style.filter= "alpha(opacity="+value+")"; // IE
}

</script>

</img></body>

</html>



Thanks
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900