前言
在日常的开发当中,我们遇到产品当中的需要切换图片或者背景的需求,就是商城当中的Banner是最长遇到的。那么前端是怎么样去实现的呢?下面就来分享一下,我实现的代码。有需要的小伙伴可以复制到编译器中运行。
JS代码实现背景切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="start">切换背景</button>
<button id="stop">停止</button>
<script type="text/javascript">
// 每隔多少时间,切换一次body的背景,setInterval
var oStart = document.getElementById("start")
var oStop = document.getElementById("stop")
// 定时器id
var timmer = null
// 图片地址
oStart.onclick = function(){
clearInterval(timmer)
timmer=setInterval(function(){
var randomInt = getRandomInt(1000,1999)
document.body.style.background = "url(https://img.infinitynewtab.com/wallpaper/"+randomInt+".jpg) no-repeat"
// background-size:宽度
document.body.style.backgroundSize = "100%"
},1000)
}
// 点击结束的时候,停止
oStop.onclick = function(){
clearInterval(timmer)
}
function getRandomInt(min,max){
return Math.floor(Math.random()*(max-min+1)+min)
}
</script>
</body>
</html>