CODEWITHSUNDEEP
javascript
kulan
kulan

Reputation: 1391

Pause JavaScript slider

I wrote a script that changes pictures every 5 sec.

var counter=1;
    window.setInterval(function slide() {
        var imgCount = $("#afisha img").length;
        for (i=1; i <= imgCount; i++) {
            var Image = document.getElementById(i);
            counter = counter + 1;
            if(counter > imgCount){counter=1;}
            Image.src="images/afisha/img" + counter + ".jpg";
        }
        if (counter==imgCount)
            counter=1;
        else
            counter = counter +1;
    },5000);

Now I want to make a Pause button, when it's pressed it will stop the image to change. How do I achieve that?

This is HTML:

    <div id="afisha">
            <img src="images/afisha/img1.jpg" id="1"  />
            <img src="images/afisha/img2.jpg" id="2"  />
            <img src="images/afisha/img3.jpg" id="3" />
            <img src="images/afisha/img4.jpg" id="4"  />
            <img src="images/afisha/img5.jpg" id="5" />
            <img src="images/afisha/img6.jpg" id="6" />
            <img src="images/afisha/img7.jpg" id="7"   />
            <img src="images/afisha/img8.jpg" id="8"   />
            <img src="images/afisha/img9.jpg" id="9"  />

        <div class="navigation">
            <span class="previous" onclick="slideManuallyPrev()"></span>
            <span class="pause"></span>
            <span class="next" onclick="slideManuallyNext()"></span>
        </div>
    </div>

EDIT : I've tried using clearInterval() method but it's not working. Where did I go wrong?:

var pauseCount = 1;
var timer=setInterval(slide,1000);

function pauseSlider() {
    if ((pauseCount % 2) == 1) {
        clearInterval(timer);
    }
    else {var timer=setInterval(slide,1000);}
    pauseCount++;
}

span .pause onlick is pauseSlider().

UPDATE: Found my mistake: var keyword in the else condition.

Upvotes: 2

Views: 159

Answers (4)

mlegg
mlegg

Reputation: 832

you can do it with css3 like this codepen http://codepen.io/mlegg10/pen/RaEpqq

EDIT: the inserted code below doesn't show here for some reason but works on the codepen link 

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});
$background:#f9f9f9;
$foreground:#2c3e50;
$foreground-light:#34495e;
$size:25px;
$ratio:1.2;
$transition-time:0.3s;

body {
  text-align:center;
}

.play {
  display:block;
  width: 0; 
	height: 0; 
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: ($size*$ratio) solid $foreground;
  margin: ($size * 2) auto $size auto;
  position:relative;
  z-index:1;
  transition: all $transition-time;
  -webkit-transition: all $transition-time;
  -moz-transition: all $transition-time;
  left:($size*0.2);
  
  &:before {
    content:'';
    position:absolute;
    top:($size*-1.5);
    left:($size*-2.3);
    bottom:($size*-1.5);
    right:($size*-0.7);
    border-radius:50%;
    border: ($size*0.2) solid $foreground;
    z-index:2;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
  }
  &:after {
    content:'';
    opacity:0;
    transition: opacity ($transition-time * 2);
    -webkit-transition: opacity ($transition-time * 2);
    -moz-transition: opacity ($transition-time * 2);
  }
  
  &:hover, &:focus {
    &:before {
       transform: scale(1.1);
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
    }
  }
  
  &.active {
	  border-color:transparent;
    &:after {
      content:'';
      opacity:1;
      width:($size);
      height:($size*1.6);
      background:$foreground;
      position:absolute;
      right: ($size*0.1);
      top: ($size*-0.8);
      border-left:($size*0.4) solid $foreground;
      box-shadow:inset ($size*0.6) 0 0 0 $background;
    }
  }
}

h1 {
   text-transform:uppercase;
  color:$foreground-light;
  letter-spacing:2px;
  font-size:2em;
  margin-bottom:0;
}

.headline {
   display:block;
  color:$foreground;
  font-size:1.5em;
  margin-bottom:1.5em;
}
<a href="#" title="Play video" class="play"></a>
<h1>CSS3 Play/Pause button</h1>
<span class="headline">click/touch the button to see the animation.</span>

Upvotes: 0

mlegg
mlegg

Reputation: 832

you can do it with css3 like this codepen http://codepen.io/mlegg10/pen/RaEpqq

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});
$background:#f9f9f9;
$foreground:#2c3e50;
$foreground-light:#34495e;
$size:25px;
$ratio:1.2;
$transition-time:0.3s;

body {
  text-align:center;
}

.play {
  display:block;
  width: 0; 
	height: 0; 
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: ($size*$ratio) solid $foreground;
  margin: ($size * 2) auto $size auto;
  position:relative;
  z-index:1;
  transition: all $transition-time;
  -webkit-transition: all $transition-time;
  -moz-transition: all $transition-time;
  left:($size*0.2);
  
  &:before {
    content:'';
    position:absolute;
    top:($size*-1.5);
    left:($size*-2.3);
    bottom:($size*-1.5);
    right:($size*-0.7);
    border-radius:50%;
    border: ($size*0.2) solid $foreground;
    z-index:2;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
  }
  &:after {
    content:'';
    opacity:0;
    transition: opacity ($transition-time * 2);
    -webkit-transition: opacity ($transition-time * 2);
    -moz-transition: opacity ($transition-time * 2);
  }
  
  &:hover, &:focus {
    &:before {
       transform: scale(1.1);
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
    }
  }
  
  &.active {
	  border-color:transparent;
    &:after {
      content:'';
      opacity:1;
      width:($size);
      height:($size*1.6);
      background:$foreground;
      position:absolute;
      right: ($size*0.1);
      top: ($size*-0.8);
      border-left:($size*0.4) solid $foreground;
      box-shadow:inset ($size*0.6) 0 0 0 $background;
    }
  }
}

h1 {
   text-transform:uppercase;
  color:$foreground-light;
  letter-spacing:2px;
  font-size:2em;
  margin-bottom:0;
}

.headline {
   display:block;
  color:$foreground;
  font-size:1.5em;
  margin-bottom:1.5em;
}
<a href="#" title="Play video" class="play"></a>
<h1>CSS3 Play/Pause button</h1>
<span class="headline">click/touch the button to see the animation.</span>

Upvotes: 0

Gabriel
Gabriel

Reputation: 2190

The simplest way would be to define a global variable, say var playing=true, change its value when the user presses pause, and then check inside the setTimeout's function if playing is true before continue (something like if(!playing) return;).

Other way could be to stop the timer on pause and set it again on play (or pause again). It is possible to do the following:

var timer=setInterval(slide,5000);

Then stop it with:

clearInterval(timer);

And then set it again with the previous code. Note that just the function name is used as the setInterval's handler.

Upvotes: 2

Rion Williams
Rion Williams

Reputation: 76547

You should consider storing the result of your setInterval() function within a variable. This will allow you to call the clearInterval() function whenever you elect to stop it :

// Create your interval
var interval = window.setInterval(function slide() { ... }, 5000);

// Call this function when you want to stop it
function pause(){
    // Pause the interval
    clearInterval(interval);
}

Example

You can see a complete example that demonstrating starting and stopping here and an example of what it looks like below :

enter image description here

Upvotes: 1

Related Questions