Question

What I’m trying to do is to change a background image 17 times, and then stop. When the user opens a new page, the same thing should happen, load 17 images and stop. The thing is, I don’t know much about javascipt (I will learn I promise.) I found a script, it works, but I geuss I have to add a break. I tried but didn’t succeed. Here’s the code:

var imgArr = new Array(
    // relative paths of images
    'images/bgshow/1.jpg',
    'images/bgshow/2.jpg',
    'images/bgshow/3.jpg',
    'images/bgshow/4.jpg',
    'images/bgshow/5.jpg',
    'images/bgshow/6.jpg',
    'images/bgshow/7.jpg',
    'images/bgshow/8.jpg',
    'images/bgshow/9.jpg',
    'images/bgshow/10.jpg',
    'images/bgshow/11.jpg',
    'images/bgshow/12.jpg',
    'images/bgshow/13.jpg',
    'images/bgshow/14.jpg',
    'images/bgshow/15.jpg',
    'images/bgshow/16.jpg',
    'images/bgshow/17.jpg'
);

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 150);

/* image rotator */
function changeImg() {
    $('#page-wrap').animate({opacity: 0}, 0, function() {
        $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
    }).animate({opacity: 1}, 0);
}

Would appreciate your help a lot!

Answer 1

That script will keep changing images every 150ms, due to the setInterval(changeImg, 150) call. Thus, to stop it, you need to clear the interval when you are done changing all your images. This can be done at the end of your changeImg function, add the following;

function changeImg() {
  // animation code...
  if (currImg == preloadArr.length) {
    clearInterval(intID);
  }
}