如何在 JavaScript 中为图像和/或视频制作后退和下一步按钮？

我正在尝试为 iframe 制作后退和下一步按钮。这是我的代码：

<script>
    var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    var iframe = document.getElementById('frame');
    var previousRandom = "npvNPORFXpc"; // initial video
    document.getElementById('random').addEventListener('click', function () {
        do {
            var random = array[Math.floor(Math.random() * array.length)];
        } 
        while (previousRandom === random)
        var url="http://www.youtube.com/embed/"+random;
        previousRandom = random;
        iframe.src = url;
    });
</script>

用一些 HTML 代码：

<button id="random">Random</button><br>
<iframe id="frame" src="http://www.youtube.com/embed/npvNPORFXpc" width="640" height="360" frameborder="0" allowfullscreen></iframe>

所以我想创建两个按钮，一个用于转到 var 数组中的下一个视频，第二个用于 var 数组中的上一个视频。

我刚开始接触JS，找不到我能理解的例子。
应该从 JS 基础知识开始，而不是这个项目，但仍然想完成这个！

http://jsfiddle.net/MPNU2/ http://jsfiddle.net/MPNU2/

使用我向您指出的示例的示例。

CSS

#utubeFrame {
    display:block;
    width:640px;
    height:360px;
}

HTML

<button id="random">Random</button>
<button id="previous">Previous</button>
<button id="next">Next</button>
<iframe id="utubeFrame"></iframe>

JavaScript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        return this.array[this.position];
    },

    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

var utubeFrame = document.getElementById('utubeFrame'),
    utubeIds = ["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"],
    baseURL = 'http://www.youtube.com/embed/',
    utubeRing = new RingArray(utubeIds);

function update() {
    utubeFrame.src = baseURL + utubeRing.currentElement();
}

document.getElementById('random').addEventListener('click', function () {
    var currentElement = utubeRing.currentElement();

    do {
        utubeRing.setRandom();
    } while (utubeRing.currentElement() === currentElement);
    update();
});

document.getElementById("previous").addEventListener("click", function () {
    utubeRing.increment(-1);
    update();
}, false);

document.getElementById("next").addEventListener("click", function () {
    utubeRing.increment(1);
    update();
}, false);

update();

On jsFiddle http://jsfiddle.net/Xotic750/TWvvD/