Simple SlideShow Question

TheApprentice · 07-20-2011, 08:52 PM

Hi everyone,

I am a newbie Javascript programmer. I have gotten better lately and am starting creating scripts from scratch to test my knowledge.

I wrote the script below and needless to say, it does not work... yet. I know I am not far and I need someone's help to tweak my script and let me know what was wrong with.

That would be greatly appreciated. Anyone?

I have this div in the middle of a page which has an image. I want the image.src to switch to the next image every 3 seconds.

Here's my html code:

Code:

<body>

<div id="slideShow">
	<img src="pic3.jpg" id="image" />
</div>

</body>

Here's my js code:

Code:

window.onload = initLoad;




function initLoad()
{
// Create a new image object 
oImage = new Image;
// tie the object image object with your target id in your html code
oImage = document.getElementById("image");

//Create a new date object
var oCurrDate = new Date();

// Create a new time object
var oCurrentTime = oCurrDate.getSeconds();

//Loop through all images in the document
for(var i=0; i<document.images.length; i++)
{
	//the current image remains so as long as 3 seconds or less have passed
	while(oCurrentTime <= oCurrentTime + 3)
	{
		// if 3 seconds have not passed, your current picture remains on the screen
		oImage.src = document.images[i].src;
		
	}
}					
}

TheApprentice · 07-20-2011, 08:55 PM

bracket was missing...

devnull69 · 07-20-2011, 09:18 PM

Generally you are already doing a decent job

Some hints:
1. You don't need to create a new Image() before assigning an existing image element to a variable .... so just omit this line
2. You can use setInterval() to create a recurring event ... something like that

Code:

var currImage = 0;
window.onload = function() {
   window.setInterval(changeImage, 3000);
};
function changeImage() {
   oImage = document.getElementById("image");
   currImage++;
   if(currImage>=document.images.length) currImage=0;
   oImage.src = document.images[currImage].src;
}

TheApprentice · 07-21-2011, 02:18 PM

devnull69, thanks for the alternative. I will try it too!

I took off the new Image () line as you said but still nothing. My browser freezes with that original code.

In order for me to learn from my own mistakes, I would need you to tweak my code (as little as possible) in order for it to work. I need to know where I did wrong.

Can it be done?

Cheers

TheApprentice · 07-21-2011, 08:37 PM

The alternate program you provided does not work either... I'm blind to what could be wrong or missing... Please help me!

Sciliano · 07-21-2011, 08:55 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	
	
	var rotate = "";
	var nIndex = 0;	
	
	function rotateContent(featuredContentContainer,rotateDelay,featuredContent){

		featuredContentContainer.innerHTML = featuredContent[nIndex];	
		nIndex = nIndex == featuredContent.length-1 ? 0 : nIndex + 1;			
		rotate = setTimeout
			(
			 function()
				{
				 rotateContent(featuredContentContainer,rotateDelay,featuredContent)
				}
			 , rotateDelay * 1000 
			);	
	}

	function randOrd(){
		
		return (Math.round(Math.random())-0.5);
	}

	function init(){		

		var rotateDelay = 4.5;  // 4.5 seconds;
		var randomize = true;   // or false;

		var featuredContent = [];		
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "featured_content")
				{
				 var featuredContentContainer = nDiv[i];
				 var nItems = nDiv[i].getElementsByTagName('ul')[0].getElementsByTagName('li');
				 for (n=0; n<nItems.length; n++)
					{
					 featuredContent[featuredContent.length] = nItems[n].innerHTML;
					}
				}
			}
		while(featuredContentContainer.lastChild)
			{
			 featuredContentContainer.removeChild(featuredContentContainer.lastChild);
			}
		if (randomize)
			{			 
			 featuredContent.sort(randOrd);
			}
		featuredContentContainer.onmouseover = function()
			{
			 this.style.cursor = "wait";
			 clearTimeout(rotate);
			 this.onmouseout = function()
				{
				 this.style.cursor = "default";
				 rotate = setTimeout
					(
					 function()
						{
						 rotateContent(featuredContentContainer,rotateDelay,featuredContent)
						}
					 , rotateDelay * 1000 * .25
					);
				}
			}	
		rotateContent(featuredContentContainer,rotateDelay,featuredContent)
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}

	.featured_content {width: 480px; height: 360px; border: 1px solid black; text-align: center;
	            	  background-color: #eee8aa; margin-left: auto; margin-right: auto; 
		          cursor: default; padding-top: 5px; overflow: auto;}

	.featured_content img {width: 98%; height: 98%;}

	.featured_content ul {list-style: none; margin: 0px; padding: 0px;}

</style>
</head>
	<body>
		<div class="featured_content">
			<ul>
				<li><img src="./images/ballpark.jpg"></li>
				<li><img src="./images/free_stamp.jpg"></li>
				<li><img src="./images/hard_rock.jpg"></li>
				<li><img src="./images/playhouse.jpg"></li>
				<li><img src="./images/old_court.jpg"></li>
			</ul>
		</div>	
	</body>
</html>

TheApprentice · 07-21-2011, 09:16 PM

Yes, that works... It's more complex than I thought though, but I will study what you gave me carefully. Thanks Scilliano!