1.轮播图

　　js编写轮播图，需要用到setInterval(计时器)；先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的；如：banner1.jpg，banner2.jpg，banner3.jpg；

　　<div>

　　　　<img src="img/banner1.jpg" id="banner" />(图片宽度自己设置，宽高与div的大小一致，确定填充满)

　　</div>

　　js编写轮播图图片变换函数

　　<script>

　　var i=1;

　　function changeImg(){

　　　　i++;

　　　　document.getElementById("banner").src="img/banner"+i+".jpg";//通过id名获得标签img并修改img的src属性的值，通过改变i的值来改变图片

　　　　if(i==3){　　　　//当i等于3时，结束一轮循环，重新给i赋值为0；下一次i++；给i赋值为1，img变为第一张图片

　　　　　　i=0;

　　　　}

　　}

　　　　//2 给函数添加计时器

　　　function init{　　　　//定义初始化函数

　　　　　　setInterval("changeImg()",3000); //给changeImg();函数添加计时器，每过3000毫秒执行一次；

　　}

　　在<body>标签中添加onload事件，文档加载完执行函数init(),写法如下：<body onload="init()">;

　　</script>

2.广告弹框　

　　　　广告弹框与上面写的一样，也是利用计时器，加载完页面后过一段时间，就弹出广告，然后过一段时间在自动关闭，需要设置计时器，页面加载完后三秒后显示广告，并清除显示计时器，重新定义隐藏计时器，三秒后隐藏，代码如下　　　　

　　<script type="text/javascript">
　　　　function init(){
　　　　　　time=setInterval("showimg()",3000);
　　　　}
　　　　function showimg(){
　　　　　　var el=document.getElementById("ad");
　　　　　　el.style.display="block";
　　　　　　clearInterval(time);　　　　　　//清除显示计时器，并重新定义隐藏计时器，三秒后隐藏图片
　　　　　　time=setInterval("hiddenimg()",3000);　　//也可以在init()函数中直接定一两个计时器，一个三秒钟后显示，一个定义六秒钟后小时，两种方式效果一样
　　　　}
　　　　function hiddenimg(){
　　　　　　document.getElementById("ad").style.display="none";
　　　　　　clearInterval(time);
　　　　}
　　</script>

下面写一个轮播图图片数字随图片变化的代码：

<script>

        $(function(){

            Bannerchangeimg();

            $("#menu").navfix(0,999);

        })

        function Bannerchangeimg(){

            var num=$("#banner li");

            var img=$("#banner img");

            var index=7;

            setInterval(function(){

                num.click(function(){

                    index=$(this).html();

                    img.prop("src","img/flash/"+index+".jpg");

                    $(this).addClass("selected").siblings().removeClass("selected");

                });

                img.prop("src","img/flash/"+index+".jpg");

                var linum=index-1;

                var selected=num[linum];

                $(selected).addClass("selected").siblings().removeClass("selected");

                index++;

                if(index==8){

                    index=1;

                }

            },3000);

        }

    </script>

html文件

<div id="banner">

                    <img src="img/flash/6.jpg"/>

                    <ul>

                        <li>1</li>

                        <li>2</li>

                        <li>3</li>

                        <li>4</li>

                        <li>5</li>

                        <li class="selected">6</li>

                        <li>7</li>

                    </ul>

                </div>

js编写轮播图，广告弹框的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  3. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  4. js实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  6. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  7. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  8. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  9. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

随机推荐

  1. (CCPC-Final 2018)K - Mr. Panda and Kakin

    题意:x是\([1e5,1e9]\)的随机数,p是小于x的最大素数,q是大于等于x的最小素数,\(n=pq\),\(c=f^{2^{30}+3}\mod{n}\),给n和c求f 题解:rsa解密,首先 ...

  2. link标签实现给网页标题前加一个小图标favicon.ico

    使用方法如下:1.<link rel="shortcut icon " type="images/x-icon" href="./favicon ...

  3. [luogu P1438] 无聊的数列

    [luogu P1438] 无聊的数列 题目背景 无聊的YYB总喜欢搞出一些正常人无法搞出的东西.有一天,无聊的YYB想出了一道无聊的题:无聊的数列...(K峰:这题不是傻X题吗) 题目描述 维护一个 ...

  4. [洛谷 P2508] 圆上的整点

    题目描述 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 输入输出格式 输入格式: r 输出格式: 整点个数 输入输出样例 输入样例#1: 4 输出样例#1: 4 说明 n ...

  5. SQL SERVER版本补丁体系及升级

    首先了解几个定义: RTM : 表示 Release to Manufacturing ,这是产品的原始发布版本,当从光盘或 MSDN 下载的默认版本.不过现在下载 SQL Server 版本时,也有 ...

  6. 自签名证书说明——自签名证书的Issuer和Subject是一样的。不安全的原因是：没有得到专业SSL证书颁发的机构的技术支持？比如使用不安全的1024位非对称密钥对，有效期设置很长等

    一般的数字证书产品的主题通常含有如下字段:公用名称 (Common Name) 简称:CN 字段,对于 SSL 证书,一般为网站域名:而对于代码签名证书则为申请单位名称:而对于客户端证书则为证书申请者 ...

  7. P2P通信中使用ENet提供UDP的可靠传输

    ENet官网:http://enet.bespin.org/ 按照他的说法: ENet's purpose is to provide a relatively thin, simple and ro ...

  8. jq 如何获取多选框选中的值

    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div> <span>运动类:</sp ...

  9. coursera国际法笔记 持续更新

    LECTURE ONE International crime court(ICC) came into being after the Second World War. The Nuremberg ...

  10. linux用户管理 用户和用户组信息

    用户管理配置文件 用户信息文件  /etc/passwd 密码文件 /etc/shadow 用户配置文件 /etc/login.defs /etc/default/useradd 新用户信息文件 /e ...