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. spring boot(十五)spring boot+thymeleaf+jpa增删改查示例

    快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...

  2. Oracle外部表详解

    外部表概述 外部表只能在Oracle 9i之后来使用.简单地说,外部表,是指不存在于数据库中的表.通过向Oracle提供描述外部表的元数据,我们可以把一个操作系统文件当成一个只读的数据库表,就像这些数 ...

  3. Spring JdbcTemplate 查询结果集Map反向生成Java实体（转）

    原文地址:Spring JdbcTemplate 查询结果集Map反向生成Java实体 以前写过一篇文章吐槽过Spring JdbcTemplate的queryForList方法(参见:http:// ...

  4. js修改样式

    添加.删除class: $("#id").addClass("someClass"); $("#id").removeClass(" ...

  5. Nginx基本

    静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端.配置: server { listen ; # 端口号 locati ...

  6. 【转】[总结]vue开发常见知识点及问题资料整理（持续更新）

    1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及 ...

  7. 什么是 开发环境、测试环境、生产环境、UAT环境、仿真环境

    开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告. 测试环境:一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发 ...

  8. JavaScript中 null 的 typeof是object

    JavaScript中  null 的 typeof是object

  9. JS 控制只能输入数字并且最多允许两位小数点

    <html lang="en"> <head> <meta charset="UTF-8"> <title>JS ...

  10. VMware 安装 centos,自定义分区

    具体查看:https://jingyan.baidu.com/album/6525d4b1799149ac7d2e9483.html?picindex=11