要写一个像轮播那样效果的事件,求解
计时器定时设置你dom容器的style.backgroundImage=背景图片url地址就行了
有用记得采纳:)。。
<div id="dv" style="height:200px"></div>
<script>
var arrImg = ['1.jpg', '2.jpg', '3.jpg']//背景url地址数组,更加多自己增加这个数组项
, l = arr.length, index = 0;
function changeImg(init) {
if (init !== true) { index++; if (index >= l) index = 0; }
document.getElementById('dv').style.backgroundImage = 'url(' + arrImg[index] + ')'
}
changeImg(true);
setInterval(function () { changeImg()}, 10000)//10换一次背景
</script>
你会轮播的话,背景轮换的原理是一样的
借用楼上的代码:
dom获取放在外层,避免重复去获取dom元素;
setInterval建议改为setTimeout;
也不用再定时器里面增加时间复杂度。
index值在回调中使用,减少一个全局变量。
<div id="dv" style="height:200px"></div>
<script>
var arrImg = ['1.jpg', '2.jpg', '3.jpg'], //背景url地址数组,更加多自己增加这个数组项
dom = document.getElementById('dv'),
timer = 1000;
function changeImg(index,arrImg,t) {
var l = arrImg.length
if (index >= l) index = 0;
dom.style.backgroundImage = 'url(' + arrImg[index] + ')';
index++;
setTimeout(function(){
changeImg(index,arrImg,t)
},timer)
}
changeImg(0,arrImg,timer);
</script>