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. 『计算机视觉』经典RCNN_其二：Faster-RCNN

    项目源码 一.Faster-RCNN简介 『cs231n』Faster_RCNN 『计算机视觉』Faster-RCNN学习_其一:目标检测及RCNN谱系 一篇讲的非常明白的文章:一文读懂Faster ...

  2. HTML(form标签)、CSS选择器一

    一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含t ...

  3. 更改 Windows 软件默认安装位置教程

    在打开的“运行”窗口中,输入命令regedit,然后点击确定按钮 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion 百度 ...

  4. Matlab-8：松弛迭代法（SOR）

    function [x,n,flag]=sor(A,b,eps,M,max1) %sor函数为用松弛迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 %eps为精度要求 % ...

  5. meta标签常用设置

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  6. json2.js 序列化 和反序列化 转

    http://www.cnblogs.com/youring2/archive/2013/03/01/2938850.html json2.js的源码地址: https://github.com/do ...

  7. python 小练习3

    求大蜜题:给你两个正整数a(0 < a < 100000)和n(0 <= n <=100000000000),计算(a^n) % 20132013并输出结果 ret = 1 d ...

  8. nginx配置location总结及rewrite规则写法(1)

    1. location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为 ...

  9. Qt Widgets——动作类与小部件菜单项

    本文主要涉及以下三个类: QAction ——QWidgetAction QActionGroup QAction可称为动作类,它一般可当作菜单中的项组成菜单,也可作为工具栏上的按钮,它主要由图标.文 ...

  10. windows开机锁定小键盘

    1.启动注册表编缉器 按下windows+R键,输入regedit回车启动注册表编缉器 2.修改注册表默认值 展开HKEY_USERS\.DEFAULT\Control Panel\Keyboard将 ...