...

View Full Version : 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:


<body>

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

</body>


Here's my js 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


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
<!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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum