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. python-MongoDB 非关系型数据库

    一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用关系型主要是为了获得 ...

  2. 四、触发器（Trigger）

    一.触发器 有点类似AOP里的拦截器,触发器不能传递参数,也不能输出参数,也不能显式调用,只有当满足触发器条件的时候Oracle会自动调用. 触发器: 1.语句级别的触发器:CRUD操作 2.行级别的 ...

  3. jstack Dump 日志文件中的线程状态

    [转]jstack Dump 日志文件中的线程状态 dump 文件里,值得关注的线程状态有: 死锁,Deadlock(重点关注)  执行中,Runnable 等待资源,Waiting on condi ...

  4. this 锁与 static 锁

    一. this 锁 同步函数其实用到的锁就是 this 锁,为什么他用到的是 this 锁呢?为了证实这个结论我 们本节将会有两个实验性的程序来作为支撑,说服自己和读者证明同步函数用到的就是 this ...

  5. axur axure rp安装

    axure rp安装 1◆ axure rp 文件下载   2◆创建安装目录     3◆ 安装图解 4◆汉化 替换   5◆ 使用   success

  6. 逆袭之旅DAY14.东软实训.Oracle.多表连接、分组函数、子查询

    2018-07-10 08:29:55 思考应用场景 异常数据的测试 6．显示能挣得奖金的雇员的姓名.工资.奖金,并以工资和奖金降序排列.select ename,sal,commfrom empWH ...

  7. 网卡驱动-BD详解（缓存描述符 Buffer Description）

    DMA介绍(BD的引入) 网络设备的核心处理模块是一个被称作 DMA(Direct Memory Access)的控制器,DMA 模块能够协助处理器处理数据收发.对于数据发送来说,它能够将组织好的数据 ...

  8. json 2017-04-21 10 17

    jo := SO(); jo.S['tttt'] := 'tttt'; TbSendedTidJson['jo'] := jo; ja := TbSendedTidJson['jo'];//取出来后, ...

  9. java 实现简单链式队列

    package com.my; /** * 链式队列 * @author wanjn * */ public class LinkedQueue { private Node head; privat ...

  10. 深入理解java虚拟机---Class文件(二十)

    无符号数.表 当实现了不同语言的编译器,比如jython,jruby等等,那么就可以利用这些语言编写代码,通过各自的编译器编译成符合jvm规范的字节码文件,就可以利用jvm来执行了. Class文件在 ...