Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Problem with Javascript slideshow

Hello, im trying to make a slideshow using Javascript, that loops through 2 images. after a certain amount of seconds, but the only way i can figure out how to do this is by using math.random methods like this.

var jumbotron = document.getElementById("jumbotron");

      var backgroundImages = ['url("http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/best-nature-hd-wallpapers-fullscreen-cool-nature-images.jpg")'];

      function bodyBackground() {
        jumbotron.style.backgroundImage = backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
      }

      bodyBackground();
      setInterval(bodyBackground, 1000);

Is there any way to make a slideshow with Javascript, or do i need to use Jquery, and also can you implement a fade effect using javascript?

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

If you have an array of the images you'd like to use, you can cycle through them using a counter instead of using the random math function.

<img id="slideImage" src="">

images = ["http://lorempixel.com/400/200/sports/", "http://lorempixel.com/400/200/abstract/", "http://lorempixel.com/400/200/animals/"];

var count = 0;

function slide(){
  document.getElementById("slideImage").setAttribute("src", images[count]);
  if (count < images.length - 1) {
    count++;
  } else {
    count = 0;
  }
  setTimeout("slide()", 2500);
};

slide();

I'm not very familiar with animations, so I haven't been able to get a fade to work using pure JavaScript. That's not to say it's not possible though! I think you could do this using CSS transitions, it's just not something I personally have experience with.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Im using the images as background-image in css, is there anyway to make them as the background instead of using a img tag?

rydavim
rydavim
18,814 Points

You only have one image in your background image array in the code you posted, so you would need to add another image for this to work. Using your code, it would look something like...

backgroundImages = ['url("http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/best-nature-hd-wallpapers-fullscreen-cool-nature-images.jpg")'];

var count = 0;

function bodyBackground(){
  document.getElementById("jumbotron").style.backgroundImage = backgroundImages[count];
  if (count < backgroundImages.length - 1) {
    count++;
  } else {
    count = 0;
  }
  setTimeout("bodyBackground()", 2500);
};

bodyBackground();
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Oh thanks, it works now, One question tough. Why do we use the "-1" in the for loop?

rydavim
rydavim
18,814 Points

Because my brain isn't working tonight, sorry. Using -1 works, but you shouldn't do it that way. Use the code below instead!

count ++;
if (count == images.length) {
  count = 0;
}

Basically, you're keeping track of the index of the image you're using from the array. Once you get to the end of the array, you want to loop back to the first image, which is index zero. Remember that the length of the array is going to be one more than the last index, because we start from zero.

Hopefully that makes more sense now, sorry about that.