Prev 和 Next 按钮在数组中切换图像（链接到图像）？？？答案

【问题标题】：Prev and Next buttons switch images (links to images) in array???Prev 和 Next 按钮在数组中切换图像（链接到图像）？？？
【发布时间】：2015-11-13 00:15:35
【问题描述】：

这些是说明：

“有一个图像和两个按钮，PREV 和 NEXT。有 10 个图像在一个数组中。当您单击 NEXT 时，应显示下一张图片，当您单击 PREV 时，应显示上一张图片。”

这是我到目前为止写的：

<html>
<head>
    <title>Image Loop</title>
</head>
<body>
    <img src="http://placekitten.com/500/200" id="image" style="height:150px; width:150px" />
    <input type="button" value="Prev" name="previous_picture" onclick= nextImage();>
    <input type="button" value="Next" name="next_picture"/>
    <script>
        function nextImage () {
            var i = images.indexOf();
            var imageSrc = document.getElementById("image").src=images[i];
            for (i = weekdays.indexOf(day); i<weekdays.length; i++)
        }

        function prevImage () {

        }
        var images = new Array(
            "http://placekitten.com/500/200",
            "http://placekitten.com/499/200",
            "http://placekitten.com/501/200",
            "http://placekitten.com/500/199"
            );
    </script>

</body>
</html>

* 当图像到达数组的末尾时，它应该循环回来。我只是不知道我在做什么...... :( *

【问题讨论】：

标签： javascript image loops button next

【解决方案1】：

您可以使用以下代码来完成它

<script language="JavaScript" type="text/JavaScript">

var imgArray = new Array(
"11011_1.jpg","11011_2.jpg","11011_3.jpg","11011_4.jpg","11011_5.jpg"
);

baseURL = "http://www.planet99.com/pix";
numImages = 5;
curImage = 1;

function f_slideshow( xflip ) {
curImage = curImage + xflip;
if (curImage > numImages)
{ curImage = 1 ; } 
if (curImage == 0)
{ curImage = numImages ; } 
document.images[2].src = baseURL + '/' + imgArray[curImage - 1];
}


</script>


Click on the buttons to flip through the photos - allow a few seconds for 
each photo to load.


<input type="button" value="<< Prev" name="cb_prev" 
onclick="f_slideshow(-1)">
<input type="button" value="Next >>" name="cb_next" 
onclick="f_slideshow(1)">

<img src='http://www.planet99.com/pix/11011_1.jpg'>

【讨论】：

【解决方案2】：

Jsfiddle 的一个解决方案，使用一点点 jquery：

https://jsfiddle.net/cchhymtx/

Javascript：

var images = new Array(
    "http://placekitten.com/500/200",
    "http://placekitten.com/499/200",
    "http://placekitten.com/501/200",
    "http://placekitten.com/500/199");

function getCurrentImageIndex() {
    return images.indexOf(document.getElementById("image").src);
}

function next() {
    nextImage = (getCurrentImageIndex() + 1) % images.length;
    document.getElementById("image").src = images[nextImage];
}

function prev() {
    nextImage = (getCurrentImageIndex() - 1 + images.length) % images.length;
    document.getElementById("image").src = images[nextImage];
}

【讨论】：

【解决方案3】：

这里有一些事情要处理。

首先，看看 Array.indexOf() 的工作原理：http://www.w3schools.com/jsref/jsref_indexof_array.asp

你想尝试什么：
for (i = weekdays.indexOf(day); i<weekdays.length; i++)

找到当前图片的索引后，如果index+1大于等于images数组的长度，则设置index为0。

【讨论】：

【解决方案4】：

多做些调查，实在是太少了。

我会给你一些建议。

Javascript: Generic get next item in array

Javascript 知道取模运算： https://msdn.microsoft.com/nl-nl/library/9f59bza0(v=vs.94).aspx

prev = (index + length - 1) % length

下一个 = (index + 1) % 长度

prev 需要 prevImage() 和 next 需要 nextImage() 函数

等等

【讨论】：

我从昨天开始就这样做了。一点进展都没有。我迷失和沮丧。另外，我在办公室里，有一群人在说话，分散了我的注意力。