JavaScripts广告轮播图以及定时弹出和定时隐藏广告
Posted 篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScripts广告轮播图以及定时弹出和定时隐藏广告相关的知识,希望对你有一定的参考价值。 轮播图: 函数绑定在body标签内 采用3张图,1.jpg 2.jpg 3.jpg 利用定时任务执行设置图片属性 src 利用for循环可以完成3秒一次 一替换。 定时弹出广告: 由于body标签已经绑定了函数 所以直接用 window 加载事件 函数 广告图片的默认display属性是none 3秒后将广告图片的 display属性 设置成block 就可以形成3秒后显示广告图片 弹出后 需要清理定时 然后在写一个3秒定时 隐藏的函数 ,最后也要清理定时。 以上是关于JavaScripts广告轮播图以及定时弹出和定时隐藏广告的主要内容,如果未能解决你的问题,请参考以下文章 django-vuecelery延迟任务定时任务 django中使用celery 秒杀功能 双写一致性 首页轮播图定时更新 课程前端页面<script>
function init(){
//书写轮播图显示的定时操作
setInterval("changeImage()",3000);
//设置显示广告图片的定时操作
time =setInterval("showAd()",3000)
}
//书写函数
var i=0
function changeImage(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle=document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display="block";
//5.清楚显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time1= setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为nono
document.getElementById("img2").style.display="none";
clearInterval(time1)
}
</script>