CODEWITHSUNDEEP
javascriptjqueryhtml
lenignes
lenignes

Reputation: 333

How do I stop slideshow of Images?

function slideshow(){
    var timer = 0;
    if(++index > 6) index = 1;
    $(".banner").attr("src", images[index-1]);
    $(".textfield").text(captions[index-1]);
    $(".num").text(index);
    timer = setTimeout(slideshow,3000);
}   

function stopShow(){
    clearTimeout(timer);
}

$("#show").click(function(){
    slideshow();
});

$("#stopshow").click(function(){
    stopShow();
});

I have two buttons to start and stop the slideshow respectively. In the above code section, when I click the stop slideshow button, it class the stopShow() function, but the setTimeout loop doesn't stop in the background

Upvotes: 3

Views: 133

Answers (2)

StackSlave
StackSlave

Reputation: 10627

Maybe this could help?

var doc, IE, E, C, LameSlideshow; // outside onload scope for use on other pages, onload of course
var pre = onload; // if using this way change var pre for other onloads or too much recursion occurs
onload = function(){
if(pre)pre();

doc = document; IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
E = function(id){
  return doc.getElementById(id);
}
C = function(e){
  return doc.createElement(e);
}
LameSlideshow = function(div, slidesArray, duration, fadeTime){
  this.div = div; this.slidesArray = slidesArray; this.frame = 0; this.running = this.fade = false;
  this.duration = duration || 1000;
  this.fadeTime = fadeTime || 1000;
  this.div.style.backgroundImage =  "url('"+slidesArray[1]+"')"; this.div.style.backgroundRepeat = 'no-repeat'; this.imgElement = C('img');
  this.imgElement.alt = this.imgElement.src = slidesArray[0]; this.div.appendChild(this.imgElement);
  this.start = function(){
    var x = this;
    function loop(){
      var t, l = x.slidesArray.length, o = 1, b;
      if(++x.frame === l)x.frame = 0;
      b = x.frame+1;
      if(b === l){
        b = 0;
      }
      x.div.style.backgroundImage = "url('"+x.slidesArray[b]+"')";
      ;
      if(IE && IE < 9){
        x.imgElement.style.filter = 'alpha(opacity=1)';
      }
      else{
        x.imgElement.style.opacity = 1;
      }
      x.imgElement.alt = x.imgElement.src = x.slidesArray[x.frame];
      if(x.fadeTime !== false){
        clearInterval(x.running);
        x.fade = setInterval(function(){
          o = +((o-0.01).toFixed(2));
          if(o >= 0){
            if(IE && IE < 9){
              x.imgElement.style.filter = 'alpha(opacity='+(o*100)+')';
            }
            else{
              x.imgElement.style.opacity = o;
            }
          }
          else{
            clearInterval(x.fade); x.fadeIn = x.duration; x.running = setInterval(loop, x.duration);
          }
        }, (x.fadeTime/100));
      }
    }
    this.running = setInterval(loop, this.duration);
  }
  this.stop = function(){
    clearInterval(this.running); clearInterval(this.fade);
    if(this.fadeTime !== false){
      if(IE && IE < 9){
        this.imgElement.style.filter = 'alpha(opacity=1)';
      }
      else{
        this.imgElement.style.opacity = 1;
      }
    }
  }
}
var slideshow = new LameSlideshow(E('outputDiv'), ['one.png', 'two.jpg', 'three.gif'], 2000, 1500);
var run = 0;
E('startStopToggleId').onclick = function(){
  if(run === 0){
    slideshow.start(); run = 1;
  }
  else{
   slideshow.stop(); run = 0;
  }
}

}

Upvotes: 0

Shawn Northrop
Shawn Northrop

Reputation: 6016

I think this has to do with the scope of var timer. Try moving the declaration outside of the slideshow() function. I.E:

var timer;

function slideshow(){
    timer = 0;
    ....
}

function stopShow(){
    clearTimeout(timer);
}
....

Upvotes: 5

Related Questions