[Vlasenko Fedor]

Туда сюда обратно
это я учился

<style>
input {
  float: left;
  width:120px;
}
#result {
  width: 240px;
  height: 90px;
  background-color: red;
  color: #fff;
  font-size: 80px;
  text-align: center;
}
#buttons {
  width:240px;
}
</style>
<div id="result"></div>
<div id="buttons">
    <input type="button" value="Previous" id="prev" />
      <input type="button" value="Next" id="next" />
      <input type="button" value="Play" id="play" />
      <input type="button" value="Pause" id="pause" />
</div>
<script>
function nav(max) {
  this.max = max;
  this.current = this.current || -1;
  this.next = function () {
    this.current = this.current < this.max - 1 ? this.current + 1 : 0;
    return this.current;
  };
  this.prev = function () {
    this.current = this.current > 0 ? this.current - 1 : this.max - 1;
    return this.current;
  };
};
 
var animTimer, slider = new nav(8);
function sliderPlay() {
  animTimer = setInterval(function () {
    result.innerHTML = slider.next();
  }, 1000);
};
next.onclick = function () {
  result.innerHTML = slider.next();
};
prev.onclick = function () {
  result.innerHTML = slider.prev();
};
play.onclick = function () {
  if (animTimer) return;
  sliderPlay();
};
pause.onclick = function () {
  clearInterval(animTimer);
  animTimer = 0;
};
window.onload = function () {
  sliderPlay();
};
</script>