www.webdeveloper.com
Results 1 to 4 of 4

Thread: Slideshow button in JS

  1. #1
    Join Date
    Dec 2011
    Posts
    12

    Question Slideshow button in JS

    I'm looking to build a slideshow where the user can click on a button and it will take them to a different page in the site.
    http://i18.photobucket.com/albums/b1...psf303e5d9.jpg


    This is my layout of what I'm wanting to do.

    I would like to have a list for each picture of the slideshow and then a button that would take the viewer to that particular page. I think understand how add a link to the code, but I'm not sure how to change the text to go along with it.

    Code:
    var imgArray = new Array(3); //this needs to be 15 in the end
    
    imgArray[0] = new Image;
    imgArray[0].src ="images/pic1.jpg";
    
    imgArray[1] = new Image;
    imgArray[1].src ="images/pic2.jpg";
    
    imgArray[2] = new Image;
    imgArray[2].src ="images/pic3.jpg";
    
    var index = 0;
    
    function cycle()
    {
    	document.banner.src = imgArray[index].src;
    	index++;
    	if(index == 3)
    	{
    		index=0;
    	}
    	setTimeout("cycle()", 2000);
    	return;
    }

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389
    Your layout is only JS. It needs the HTML (and any CSS) to make it work.

    How does your button requirements relate to the script provided?
    The script only appears to cycle through 3 images and there are
    no buttons to go to any different page.

    And BTW, what will the page(s) look like. Do you have 15 different HTML files?

    Your requirements are somewhat sketchy to me and the code provided
    does not seem to relate to them. Can you explain further?

  3. #3
    Join Date
    Dec 2011
    Posts
    12
    What I would like to do is add text that goes along with the pictures. Below is the HTML. This would only be on the index page, but there would be five links connected to slideshow. There would be five sections of the slideshow, where I would have 3 pictures each that would be connected to a section of the site. I think the best & easiest thing for the text is making the pictures have text in Photoshop.

    Code:
    <div class="grid_3" style="float:left; margin-left:210px; background:#000; height:85%; width:60%"><img src="images/pic1.jpg" name="banner" alt="cycling pictures" width:100% height="90%"/></div>
    
    <div class="button">Learn More</div>

  4. #4
    Join Date
    Dec 2011
    Posts
    12
    This is what I have so far.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles