Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Simple SlideShow Question

    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;
    		
    	}
    }					
    }
    Last edited by TheApprentice; 07-20-2011 at 08:56 PM. Reason: bracket was missing...

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    bracket was missing...

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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;
    }

  • Users who have thanked devnull69 for this post:

    TheApprentice (07-21-2011)

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    thanks

    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
    Last edited by TheApprentice; 07-21-2011 at 08:38 PM. Reason: adding material

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The alternate program you provided does not work either... I'm blind to what could be wrong or missing... Please help me!

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>
    Last edited by Sciliano; 07-22-2011 at 12:51 PM. Reason: minor improvements

  • Users who have thanked Sciliano for this post:

    TheApprentice (07-21-2011)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thanks

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •