Jquery 如何在背景上制作随机图像_Jquery_Html_Image

Jquery 如何在背景上制作随机图像

jquery html image

Jquery 如何在背景上制作随机图像,jquery,html,image,Jquery,Html,Image,我想在我的网站上，每5分钟的背景变化到一个新的图像。如果可能的话，我希望用jQuery完成这项工作我想让它通过3个图像循环。如何做到这一点这是我目前的代码： <!DOCTYPE html> <html> <head> <script type='text/javascript' src='jquery-3.1.1.min.js'></script> <script type='text/javascript'

我想在我的网站上，每5分钟的背景变化到一个新的图像。如果可能的话，我希望用jQuery完成这项工作

我想让它通过3个图像循环。如何做到这一点

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            setInvetval(function(){
        $('body').css('background-image', 'image-path');
    }, 300000);
    });
    </script>
</head>

<body>

</body>
</html>


$（文档）.ready（函数（）{
setInvetval（函数（）{
$（'body'）.css（'background-image'，'image-path'）；
}, 300000);
});

有点不清楚，但我想您需要下面的代码，您可以运行它：

$（文档）.ready（函数（）{
//初始化索引
var实际值=0；
//间隔实现
setInterval（函数（）{
//设置图像
$（'body'）.css（'background'，'url（'“+my_image_array[actual]+“）”）；
//控制索引
if（实际==我的图像\u数组.length）{
实际值=0；
}否则{
实际值=实际值+1；
}
//调试索引
//控制台日志（实际）；
}，800）；//300000，已设置了较短的测试时间
});
//实例化数组
var my_image_array=新数组（）；
//数组结构中的某些图像
我的\u图像\u数组[0]='https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg';
my_image_数组[1]='http://static8.depositphotos.com/1003153/893/v/950/depositphotos_8938809-Example-rubber-stamp.jpg';
my_image_数组[2]='http://thumb7.shutterstock.com/display_pic_with_logo/436114/268701041/stock-vector-example-blue-square-grunge-textured-isolated-stamp-268701041.jpg';
my_image_数组[3]='http://garsonadvogados.com.br/wp-content/uploads/2015/08/example3.jpg';
my_image_数组[4]='http://st.depositphotos.com/1023799/2906/v/950/depositphotos_29066941-Grunge-example-rubber-stamp-vector.jpg';
/*主体的基本样式*/
正文{宽度：100%；高度：100%；}
请使用下面的脚本代码
 <script type='text/javascript'>
        $(document).ready(function () {
            var timeout = 300000;
            var i = 1;
            var action = function () {
                // Do stuff here
                if (i < 3) {
                    i++;
                } else {
                    i = 1;
                }
                console.log("image" + i);
                // $('body').css('background', "url('path/image"+i+ "')"); you can possible put your image here.
                setTimeout(action, timeout);
            };
            action();

        });
    </script>


$（文档）.ready（函数（）{
var超时=300000；
var i=1；
var action=函数（）{
//在这里做事
如果（i<3）{
i++；
}否则{
i=1；
}
控制台日志（“图像”+i）；
//$（'body'）.css（'background'，'url（'path/image“+i+”））；您可以将图像放在这里。
setTimeout（操作，超时）；
};
动作（）；
});

在其中，我创建了一个递归函数，它可以无限工作，您可以随时更改超时变量。请检查您的浏览器控制台，以便了解情况。你必须给你的图像编号的后修复从1到3，这样它将工作，因为你想要的。例如，image1、image2和image3