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


    轮播图:

    函数绑定在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>
  • 相关阅读:
    在阿里云Centos下LNMP环境搭建
    Thinkphp5.0整合个推例子
    在H5页面内通过地址调起高德地图实现导航
    模仿segmentfault 评论
    无限极分类中递归查找一个树结构
    文件缓存
    职业发展
    Codeigniter-实现权限认证
    mysql 数据备份
    依赖注入+控制反转
  • 原文地址:https://www.cnblogs.com/benjamin77/p/9159801.html
Copyright © 2020-2023  润新知