在制作网页的时候,当我们想要在网页加载完成后几秒自动更换一张新的背景图片该怎样实现呢?
一般我们会使用js自带的setTimeout()方法来实现定时延迟加载网页中某些元素的效果
setTimeout()方法可以在指定的毫秒后自动调用指定函数与表达式。
1000毫秒=1秒
代码如下:
首先引用jquey插件
<html>
<head>
<script type="text/javascript" src="jquey.js"></script>
</head>
<body id="body">
<script type="text/javascript">
setTimeout(function () {
$("#body").attr(("Background","背景图片地址"));
}, 5000);
</script>
</body>
</html>
此为页面打开5秒后自动加载背景图片,只加载一次
如果需要每隔5秒更换一次新的背景图片,则可以使用setInterval()方法
setInterval方法与setTimeout方法类似,都可以定时调用函数或计算表达式,但不同的是,setInterval()方法能够按照指定的周期来执行函数
代码如下:
<html>
<head>
</head>
<body id="body">
<script type="text/javascript">
window.onload=function(){
var num = 0;
var imgarr =["0.jpg", "1.jpg", "2.jpg"];
var tbody=document.body;
tbody.style.background="url(0.jpg)";
function time(){
num++;
num=num%3;
tbody.style.background="url("+imgarr[num]+")";
}
setInterval(time,5000);
}
</script>
</body>
</html>
通过创建image图片数组,然后重复定时循环num数组取余,来重复循环显示数组中三张图片。