码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScripts广告轮播图以及定时弹出和定时隐藏广告

时间:2018-06-09 16:44:27      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:asc   function   rip   hang   隐藏   func   轮播   ++   cti   

轮播图:

函数绑定在body标签内

采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换。

定时弹出广告:

由于body标签已经绑定了函数

所以直接用 window 加载事件 函数

广告图片的默认display属性是none

3秒后将广告图片的 display属性 设置成block  就可以形成3秒后显示广告图片

弹出后 需要清理定时

然后在写一个3秒定时 隐藏的函数 ,最后也要清理定时。

 

<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>

 

JavaScripts广告轮播图以及定时弹出和定时隐藏广告

标签:asc   function   rip   hang   隐藏   func   轮播   ++   cti   

原文地址:https://www.cnblogs.com/benjamin77/p/9159801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!