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>

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

时间: 2024-10-20 10:58:47

JavaScripts广告轮播图以及定时弹出和定时隐藏广告的相关文章

猫猫学iOS 之广告轮播图,collectionView制作

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 效果图 不多说,好不好先看效果,之前做过一个scrollView的轮播图,但是很局限,很多多余代码,今天猫猫重新做了一个用collectionView的流水布局做的一个,可以拿去做广告轮播,也可以做系统新特性哦,来,看下效果吧. 源码共享:https://github.com/znycat/NYCarouselView 很久很久以前就想做了.总而言之,猫猫代码有

预约挂号系统之首页广告轮播图

轮播图设计 <div id="main_top_left"> <div id="list" style="left: -650px;"> <img src="../img/slideshow_5.jpg" alt="5"/> <img src="../img/slideshow_1.jpg" alt="1"/> <

android中广告轮播图总结

功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,setEnable(true),非当前页设置为false.由于图片是从网络获取,数量不定,所以此处不能使用switch写死,需要设置变量记录当前和前一个.代码如下: llAddPoint为添加指示点的线性布局 prePosition为前一个位置,初始化时设为0,newPosition为当前位置 int n

猫猫学iOS 之广告轮播图,collectionView制作(源码)

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 源码共享:https://github.com/znycat/NYCarouselView 效果图 源代码 NYCarouselView.h // // NYCarouselView.h // 广告轮播CollectionView // // Created by IOS on 15/12/26. // Copyright ? 2015年 com.itcat.c

jquery 广告轮播图

轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * 2.3鼠标滑过按钮,按钮颜色加深 * 3底部的导航点 * 3.1图片为第几张时,点在那第几张 * 3.2鼠标滑到第几个点,图片切换到第几张 * 4图片自动轮播 * 4.1默认自动下一张 * 4.2鼠标在图片范围时,停止切换 * 4.3鼠标离开图片范围,恢复自动切换 * 5鼠标放在图片范围时,变为小手

pc端广告轮播图

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>轮播</title> <style> body{ margin:0; } .banner { width: 100%; position: relative; overflow:hidden; } .banner ul { width: 100%; height:500px; } .b

android-auto-scroll-view-pager (无限广告轮播图)

github 地址: https://github.com/Trinea/android-auto-scroll-view-pager Gradle: compile ('cn.trinea.android.view.autoscrollviewpager:android-auto-scroll-view-pager:1.1.2') { exclude module: 'support-v4' } -keep class cn.trinea.android.** { *; } -keepclas

Android广告轮播图实现

先看效果 第一步,布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

Android广告轮播图效果实现

效果如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"