Question

我需要在我的网页上显示随机图片（在某些特定类别或标签中）。

是否有这样的服务让我能够通过php或javascript从他们那里获取随机图像？

我知道但是他们的存储库非常小。

Answer 1

<强>问题：

我需要在我的网页上显示随机图片（在某些特定类别或标签中）。

<强>解决方案：

您可以使用setInterval()和random()方法在javascript中实现随机图像轮换。 setInterval()方法调用函数或以指定的时间间隔（以毫秒为单位）计算表达式，random()方法返回0（包括）和1（不包括）之间的随机数。让我解释一下这个旋转的东西是如何工作（测试）

假设您有四张图片，如下所示：

firstimage.png
secondimage.png
thirdimage.png
fourthimage.png

<强> HTML

这是一个显示图像的简单图像标记

<!--display an image initially-->
<img id="myImage" src="firstimage.png" />

<强> JAVASCRIPT

首先获取图片标记的ID

// Get the id of image tag
var myImage = document.getElementById("myImage");

然后将所有图像的路径存储在一个数组中，如下所示：

// store the path of all the images in an array
var imageArray = ["firstimage.png", "secondimage.png", "thirdimage.png", "fourthimage.png"];

然后编写一个函数以相等的时间间隔旋转图像，如下所示：

// function to rotate images after specified interval(3 seconds in this case)
function imageRotation(){
    // since we have four images hence we've taken 4 as a multiplier to get random number between 0 and 3
    var imageIndex = Math.floor(Math.random() * 4); 

    // set appropriate attribute
    myImage.setAttribute("src", imageArray[imageIndex]);
}

请注意，上述imageRotation()函数使用random()函数生成0到3之间的随机数，然后决定下一个要选择的图像。

现在使用适当的参数调用setInterval()函数，如下所示：

// imageRotation will be called in every 3 seconds
var everyInterval = setInterval(imageRotation, 3000);

旁注： setInterval()方法将继续调用该函数，直到调用clearInterval()或窗口关闭。因此，为了在任何时间点停止此操作，我们都有clearInterval()功能。例如，如果您想要一种行为，当用户将鼠标悬停在图像上时，旋转将停止，然后您可以执行以下操作：

// when the user hovers his/her mouse over an image, the rotation will stop
myImage.onhover = function(){
    clearInterval(everyInterval);
}

这是完整的工作代码，

<html>
<head>
    <title>Page Title</title>
</head>

<body>

    <!--set an image initially-->
    <img id="myImage" src="firstimage.png" />

<script>
    window.onload = function(){

        // Get the id of image tag
        var myImage = document.getElementById("myImage");

        // store the path of all the images in an array
        var imageArray = ["firstimage.png", "secondimage.png", "thirdimage.png", "fourthimage.png"];

        // function to rotate images after specified interval(3 seconds in this case)
        function imageRotation(){
            // since we have four images hence we've taken 4 as a multiplier to get random number between 0 and 3
            var imageIndex = Math.floor(Math.random() * 4); 

            // set appropriate attribute
            myImage.setAttribute("src", imageArray[imageIndex]);
        }

        // imageRotation will be called in every 3 seconds
        var everyInterval = setInterval(imageRotation, 3000);

        // when the user hovers his/her mouse over an image, the rotation will stop
        myImage.onhover = function(){
            clearInterval(everyInterval);
        }

    };
</script>
</body>
</html>

<强>编辑：

<强>问题：

是否有这样的服务让我能够通过php或javascript从中获取随机图像？

<强>解决方案：

要获取大型图片库，您可以使用TinEye API，flickr API或BOSS Search API。 Google的API已于2010年11月1日正式弃用。

随机图像服务

1 个答案: