上一个和下一个按钮切换图像(链接到图像)在数组??

Prev and Next buttons switch images (links to images) in array???

本文关键字：图像 数组 链接 按钮 上一个 下一个      更新时间：2023-09-26

使用说明如下:

"有一个图像和两个按钮，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: 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()函数

等。

jsfield的一个解决方案，使用一点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];
}

你这里有一些东西没有。

首先，看看Array.indexOf()是如何工作的:http://www.w3schools.com/jsref/jsref_indexof_array.asp

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

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

可以使用以下代码

<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'>
相关文章：