Question

这些是说明：

＆＃34;有一个图像和两个按钮，PREV和NEXT。在阵列中有10个图像。当您单击NEXT时，将显示下一张图片，当您单击PREV时，将显示上一张图像。＆＃34;

这是我到目前为止写的：

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

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

Answer 1

进行更多调查，这确实显示出太少的努力。

我会给你一些指示。

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

next =（index + 1）％length

prev需要prevImage（），next需要nextImage（）函数

等

Answer 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];
}

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

Answer 4

您可以使用以下代码完成此操作

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

Prev和Next按钮切换数组中的图像（链接到图像）???

4 个答案: