尝试使用下一个和上一个按钮获取简单的 javascript 库以循环回到开头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12013658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trying to get simple javascript gallery with next and previous buttons to loop back to the beginning
提问by user1607957
im fairly new to javascript, but im basically trying to make a next/previous click through gallery. I've managed to find tutorials and bits to get images to click through. however i cant seem to work out how to return to the beginning of the series after the 4th(final) image.
我对 javascript 还很陌生，但我基本上是在尝试通过图库进行下一次/上一次点击。我已经设法找到教程和一些东西来让图像点击。但是我似乎无法弄清楚如何在第 4 个（最终）图像之后返回到系列的开头。
this is what i have so far-
这就是我迄今为止所拥有的-
<script type="text/javascript">
var photos=new Array()
var which=0
photos[0]='images/image1.jpg'
photos[1]='images/image2.jpg'
photos[2]='images/image3.jpg'
photos[3]='images/image4.jpg'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<form>
<input type="button" value="<<Back" onClick="backward()">
<input type="button" value="Next>>" onClick="forward()">
</form>
essentially I want the buttons to create a continuous loop through the 4 images. I know there is going to be a simple solution I just cant see it. Any help would be great! thank you in advance!
基本上我希望按钮通过 4 个图像创建一个连续的循环。我知道会有一个简单的解决方案，我只是看不到它。任何帮助都会很棒！先感谢您！
回答by BaroqueBobcat
You could do this:
你可以这样做：
function backward() {
if (which <= 0) {
which = photos.length - 1;
} else {
which--;
}
document.images.photoslider.src=photos[which];
}
function forward(){
which = (which + 1) % photos.length; // modulus keeps which within
document.images.photoslider.src=photos[which]; // the bounds, while incrementing
}
going backward, if which is 0 or less, jump to the last photo. Going forward, if which + 1 == photos.length, the modulus will zero it out, looping you back to the beginning.
向后走，如果小于等于 0，则跳转到最后一张照片。展望未来，如果 which + 1 == photos.length，则模数会将其归零，让您循环回到开头。
回答by harsh
<!DOCTYPE html>
<html>
<body>
<p> click on the button to change the image</p>
<input type="button" value="<<Back" onClick="backward()">
<img src = "youtube.png" value = "PREVIOUS" id = "prev">
<input type="button" value="Next>>" onClick="forward()">
<script>
var photos = new Array()
var i=0
photos[0]='youtube.png'; //enter the path of the image here
photos[1]='facebook.png';
photos[2]='twitter.png';
photos[3]='sirius_logo_sm.gif';
function backward(){
if (i>0){
i=i-1;
} else {
i=photos.length-1;
}
document.getElementById("prev").src=photos[i];
}
function forward()
{
if (i<photos.length-1){
i=i+1;
} else {
i=0;
}
document.getElementById("prev").src=photos[i]; }
</script>
</body>
</html>
回答by tuxtitlan
function backward(){
if (which>0){
which=which-1;
} else {
which=photos.length-1;
}
document.images.photoslider.src=photos[which];
}
function forward(){
if (which<photos.length-1){
which=which+1;
} else {
which=0;
}
document.images.photoslider.src=photos[which];
}
tada!
多多！
