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. 『计算机视觉』Mask-RCNN_推断网络终篇：使用detect方法进行推断

    一.detect和build 前面多节中我们花了大量笔墨介绍build方法的inference分支,这节我们看看它是如何被调用的. 在dimo.ipynb中,涉及model的操作我们简单进行一下汇总, ...

  2. LVS-概念

    一.负载均衡LVS基本介绍 LB集群的架构和原理很简单,就是当用户的请求过来时,会直接分发到Director Server上,然后它把用户的请求根据设置好的调度算法,智能均衡地分发到后端真正服务器(r ...

  3. Android之Activity生命周期详解

    Activity的生命周期方法: onCreate()--->onStart()--->onResume()--->onPause()--->onStop()--->on ...

  4. rac 关库 启库

    关库顺序 先关闭数据库 然后关闭节点资源 [root@rac1 ~]# srvctl stop   database  -d prod[root@rac1 ~]# srvctl stop   inst ...

  5. Oracle 11.2.0.4.0 Dataguard部署和日常维护(6)-Active Dataguard篇

    1. 检查主备库的状态 on primary column DATABASE_ROLE format a20 column OPEN_MODE format a15 column PROTECTION ...

  6. java集合类，详解

    集合详解 1.1HashSet HashSet是Set接口的一个子类,主要的特点是:里面不能存放重复元素,而且采用散列的存储方法,所以没有顺序.这里所说的没有顺序是指:元素插入的顺序与输出的顺序不一致 ...

  7. numpy ndarray

    >>> aarray([[1, 2], [3, 4]])>>> a.shape(2, 2)>>> barray([2, 3])>>&g ...

  8. 【Crash】C++程序崩溃排查方法

    windows下C++程序release版本崩溃错误排查方法. 一个你精心设计的24小时不间断运行,多线程的程序,突然运行了几个月后崩了,此问题是非常难以排查的,也是很头疼的问题. 现利用Google ...

  9. ubuntu16.10 中安装mysql

    1.安装MYSQL: root@ubuntu:~# sudo apt-get install mysql-server root@ubuntu:~# apt isntall mysql-client ...

  10. Win10系列：VC++绘制位图图片

    在使用Direct2D绘制图片的过程中,通过IWICImagingFactory工厂接口来得到绘制图片所需要的资源.本小节将介绍如何通过IWICImagingFactory工厂接口得到这些资源,并使用 ...