[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>
//Обьект навигации. Вперед, назад и текущая позиция. Max кол-во элементов, первый элемент - 0
      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);
      };
      window.onload = function () {
        sliderPlay();
      };
      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;
      };
    </script>

Маленький подсказка