如何在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>

变量数组=[“npvNPORFXpc”、“CcsUYu0PVxY”、“dE_XVl7fwBQ”、“iIwxR6kjTfA”、“USe6s2kfuWk”]；
var iframe=document.getElementById（'frame'）；
var previousRandom=“npvNPORFXpc”//初始视频
document.getElementById（'random'）.addEventListener（'click'，函数（）{
做{
var random=array[Math.floor（Math.random（）*array.length）]；
} 
while（先前随机===随机）
变量url=”http://www.youtube.com/embed/“+随机；
先前随机=随机；
iframe.src=url；
});

使用一点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>

Random

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

我刚开始学习JS，找不到一个我理解的例子。
应该从JS的基础知识开始，而不是这个项目，但仍然希望完成这个

HTML：

<button id="random">Random</button>
&nbsp;
&nbsp;
<button id="prevVideo">Prev</button>
<button id="nextVideo">Next</button><br>

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

随机
上
下一步

JS:

var数组=[“npvNPORFXpc”、“CcsUYu0PVxY”、“dE_XVl7fwBQ”、“iIwxR6kjTfA”、“USe6s2kfuWk”]；
var iframe=document.getElementById（'frame'）；
var previousRandom=“npvNPORFXpc”//初始视频
document.getElementById（'random'）.addEventListener（'click'，函数（）{
做{
var random=array[Math.floor（Math.random（）*array.length）]；
}while（先前随机===随机）
变量url=”http://www.youtube.com/embed/“+随机；
先前随机=随机；
iframe.src=url；}）；
document.getElementById（'prevVideo'）。addEventListener（'click'，函数（）{
var curIndex=array.indexOf（previousRandom）；
库林德斯--；
if（curIndex<0）
{
curIndex=array.length-1；
}
var video=数组[curIndex]；
变量url=”http://www.youtube.com/embed/“+视频；
previousRandom=视频；
iframe.src=url；
});
document.getElementById（'nextVideo'）。addEventListener（'click'，function（）{
var curIndex=array.indexOf（previousRandom）；
curIndex++；
if（curIndex>=array.length）
{
curIndex=0；
}
var video=数组[curIndex]；
变量url=”http://www.youtube.com/embed/“+视频；
previousRandom=视频；
iframe.src=url；
});

工作示例：

---

使用我给您指出的示例

CSS

HTML

随机
以前的
下一个

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();

函数环形阵列（对象、位置）{
this.array=RingArray.compact（对象）；
这个。设置位置（位置）；
}
RingArray.toInt32=函数（编号）{
返回编号>>0；
};
RingArray.toUint32=函数（编号）{
返回编号>>>0；
};
RingArray.isOdd=函数（编号）{
返回编号%2==1；
};
RingArray.indexWrap=函数（索引，长度）{
index=RingArray.toInt32（index）；
长度=环形阵列.toUint32（长度）；
if（索引<0&&RingArray.isOdd（长度））{
指数-=1；
}
返回RingArray.toUint32（索引）%长度；
};
RingArray.compact=（函数（过滤器）{
var紧；
if（过滤器类型===‘函数’）{
紧凑=功能（对象）{
返回filter.call（对象、函数（元素）{
返回元素；
});
};
}否则{
紧凑=功能（对象）{
对象=对象（对象）；
变量数组=[]，
长度=RingArray.toUint32（object.length），
指数
对于（索引=0；索引<长度；索引+=1）{
if（对象中的索引）{
push（对象[索引]）；
}
}
返回数组；
};
}
回归契约；
}（Array.prototype.filter））；
RingArray.prototype={
设置位置：功能（位置）{
this.position=RingArray.indexWrap（位置，this.array.length）；
归还这个；
},
setToStart:函数（）{
返回此。设置位置（0）；
},
setToEnd:函数（）{
返回此.setPosition（this.array.length-1）；
},
setRandom:函数（）{
返回this.setPosition（Math.floor（Math.random（）*this.array.length））；
},
增量：函数（数量）{
返回this.setPosition（this.position+（RingArray.toInt32（amount）| | 1））；
},
previousElement:函数（）{
返回this.array[RingArray.indexWrap（this.position-1，this.array.length）]；
},
currentElement:函数（）{
返回此.array[this.position]；
},
nextElement:函数（）{
返回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=新的环形阵列（utubeIds）；
函数更新（）{
utubeFrame.src=baseURL+utubeRing.currentElement（）；
}
document.getElementById（'random'）.addEventListener（'click'，函数（）{
var currentElement=utubeRing.currentElement（）；
做{
utubeRing.setRandom（）；
}while（utubeRing.currentElement（）==currentElement）；
更新（）；
});
document.getElementById（“上一个”）.addEventListener（“单击”），函数（）{
增量-1；
更新（）；
}，假）；
document.getElementById（“下一步”）.addEventListener（“单击”），函数（）{
增量（1）；
更新（）；
}，假）；
更新（）；

---

在

上，这可能会有帮助，您必须存储数组的当前索引，然后当您点击“下一个”或“上一个”时，可以增加或减少索引。你还必须检查是否有下一个或上一个视频，你能给我一个更具体的例子，这有助于并理解一点，我知道我需要脚本做什么。就像你说的，我必须在上一个和下一个数组中指出当前数组。因此，当当前“视频”处于活动状态时

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

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

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();