Question

如何使用JQuery从图像文件中显示随机图像，然后单击链接时图像将更改为另一个随机图像。

这是图片需要加载的img id，如果选择了上面的链接。

    <a href="#imageChange">

    <img id="cap" src="" height="220px" width="530px" />

Answer 1

如果您将图像路径保存在数据库中，则可以执行以下操作：

SELECT imagePaths FROM table ORDER BY RAND() LIMIT 1

获取随机图像路径然后显示它。

使用客户端/服务器端语言，您可以生成一个随机数，该数字将用于从存储所有图像的数组中获取图像路径。

在javascript中你可以使用这样的函数：

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

使用PHP：

$index = rand(0, $nbOfImgs);

Answer 2

一旦获得图片网址，这里的jQuery代码段就会生效。 theImageURL指的是图像的完整URL。

$('#imageChange').on('click',function(event){
    event.preventDefault(); // to prevent page from jumping or navigating away
    $('#cap').attr('src',theImageURL); //setting the source for the image.
});

或者你也可以调用$（'＃cap'）。load（theImageURL）;

在页面上的div中显示图像文件中的随机图像

2 个答案: