[рони]

Poznakomlus,

<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;
      }
      .set{
        width: 20px;
        height: 20px;
        border-radius:50%;
        float: none;
        margin:   0px 3px;
          }
       .show{
         background-color: rgb(0, 255, 0);
       }

    </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>
       for (var i=0; i<9; i++)  {
     var input = document.createElement("input");
     input.type = "button";
     input.className = "set";
     input.onclick = function (a) {
         return function () {
             result.innerHTML = slider.set(a);
                      }
     }(i);
      buttons.appendChild(input);
      }
      var b =  document.querySelectorAll('.set')
//Обьект навигации. Вперед, назад и текущая позиция. Max кол-во элементов, первый элемент - 0
      function nav(max) {
        this.old = null;
        this.max = max;
        this.current = -1;
        this.next = function () {
          this.current++;
          return this.get();
        };
        this.prev = function () {
          this.current--;
          return this.get();
        };
        this.get =  function () {this.current > this.max && (this.current = 0);
        this.current < 0 && (this.current = this.max);
        this.old && (this.old.className = this.old.className.replace(' show', ''));
        this.old = b[this.current];
        this.old && (this.old.className = this.old.className + ' show');
        return this.current
        };
        this.set =  function (a) {this.current = a;
        return this.get()
        };
      };

      var animTimer, slider = new nav(8);
      result.innerHTML = slider.set(0); 
      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>