Навигатор

HTML

<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>

CSS

input {
  float: left;
  width:120px;
}
#result {
  width: 240px;
  height: 90px;
  background-color: red;
  color: #fff;
  font-size: 80px;
  text-align: center;
}
#buttons {
  width:240px;
}

JavaScript

var timer, slider = new nav([1, 2, 3, 4, 5, 6, 7]);

function nav(arr) {
    var current = -1, len = arr.length - 1;
    this.next = function () {
        current =  current < len ? current + 1 : 0;
        return arr[current];
    };
    this.prev = function () {
        current = current > 0 ? current - 1 : len;
        return arr[ current];
    };
}


function sliderPlay() {
    result.innerHTML = slider.next();
    timer = setTimeout(sliderPlay, 1000);
}

next.onclick = function () {
    result.innerHTML = slider.next();
};

prev.onclick = function () {
    result.innerHTML = slider.prev();
};

play.onclick = function () {
    if (timer) return;
    sliderPlay();
};

pause.onclick = function () {
    clearTimeout(timer);
    timer = 0;
};

window.onload = sliderPlay;