[Vlasenko Fedor]

<style>
      input {
        float: left;
        width:120px;
      }
      #result {
        width: 240px;
        height: 70px;
        background-color: red;
        color: #fff;
        font-size: 60px;
        text-align: center;
      }
      #buttons, #panel {
        width:240px;
      }
      .set {
        width: 20px;
        height: 20px;
        border-radius:50%;
        float: none;
        margin: 5px;
      }
      .active {
        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>
  <div id="panel"></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 () {
          step('next');
        }, 1000);
      };
      function slActive(n){
        panel.children[slider.current].className = "set";
      	panel.children[n].className += " active";
        result.innerHTML = n;
        slider.current = n;
      }
      function step(poz){
      	panel.children[slider.current].className = "set";
        result.innerHTML = slider[poz]();
        panel.children[slider.current].className += " active";
      }
      window.onload = function () {
        for (var i = 0, insHtml =""; i < slider.max; i++){
			insHtml +='<input type="button" class="set" onclick="slActive('+i+')">';
        }
        panel.innerHTML = insHtml;
        panel.children[0].className += " active";
        result.innerHTML = 0;
        slider.current = 0
        sliderPlay();
      };
      next.onclick = function () {
        step('next');
      };
      prev.onclick = function () {
        step('prev');
      };
      play.onclick = function () {
        if (animTimer) return;
        sliderPlay();
      };
      pause.onclick = function () {
        clearInterval(animTimer);
        animTimer = 0;
      };
    </script>

рони, nav - хороший объект был
да, а код все растет