<!DOCTYPE html>

<html>

  <head>

    <title>图片轮播</title>

    <style>

      div{

	  border: 1px solid red;

	  width:218px;

	  height: 218px;

      }

      .show{

	  display: inline-block;

      }

      .hide{

	  display: none;

      }

    </style>

    <meta charset="UTF-8">

  </head>

  <body>

    <!--    onmouseover=""  鼠标悬停事件

	    onmouseout=""   鼠标离开事件-->

    <div onmouseover="pause1();" onmouseout="lunbo();">

      <img src="../images/01.jpg" class="show"/>

      <img src="../images/02.jpg" class="hide"/>

      <img src="../images/03.jpg" class="hide"/>

      <img src="../images/04.jpg" class="hide"/>

      <img src="../images/05.jpg" class="hide"/>

      <img src="../images/06.jpg" class="hide"/>

    </div>

    <script>

      //轮播

      var id = null;

      var index = 0;

      function lunbo() {

          //轮播次数

          id = setInterval(function () {

              index++;

              //获取所有图片

              var imgs = document.getElementsByTagName("img");

              //将他们隐藏

              for (var i = 0; i < imgs.length; i++) {

                  imgs[i].className = "hide";

              }

              //将下一张隐藏

              var next = index % imgs.length;

              imgs[next].className = "show";

          }, 2000);

      }

      function pause1() {

          clearInterval(id);

      }

      //在页面加载后自动轮播

      lunbo();

    </script>

  </body>

</html>

联级菜单实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- <script type="text/javascript" src="demo6.js">

</script>  -->

<title>联动菜单</title>

</head>

<body>

	省：

	<select id="province" onchange="chg();">

		<option value="-1">请选择</option>

		<option value="0">河北省</option>

		<option value="1">山东省</option>

		<option value="2">山西省</option>

	</select>

	市：

	<select id="city">

		<option>请选择</option>

    </select>

    <script>

        // 模拟加载城市

    function loadCities() {

    return[

        ["石家庄","廊坊","保定"],

        ["济南","青岛","德州"],

        ["太原","大同","阳泉"]

    ];

    }

    var cities=loadCities();

    console.log(cities);

    function chg() {

        var sel1=document.getElementById("province");

        //获取省份

        var pindex=sel1.value;

        //获取该省份的城市

        var pcities=cities[pindex];

        console.log(pcities);

        //删除城市下拉列表中的所有城市

        var sel2=document.getElementById("city");

        var options=sel2.getElementsByTagName("option");

        console.log(options);

        for(var i=options.length-1;i;i--){

            sel2.removeChild(options[i]);

        }

        //在增加该省份城市

        if(pcities){

            for(var i=0;i<pcities.length;i++){

                var opn=document.createElement("option");

                opn.innerHTML=pcities[i];

                sel2.appendChild(opn);

            }

        }

    }

    </script>

</body>

</html>

用js实现图片连播和联级菜单的实现的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  4. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  6. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  7. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  8. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  9. js实现图片轮播

    效果图

随机推荐

  1. 【BZOJ3242】【NOI2013】快餐店（动态规划）

    [BZOJ3242][NOI2013]快餐店(动态规划) 题面 BZOJ 题解 假设我们要做的是一棵树,那么答案显然是树的直径的一半. 证明? 假设树的直径是\(2d\),那么此时最远点的距离是\(d ...

  2. 【BZOJ2141】排队（CDQ分治）

    [BZOJ2141]排队(CDQ分治) 题面 题面以及树套树做法见这里 题解 大部分树套树/主席树这类题目都可以用整体二分/CDQ分治来做. 这题考虑一下,在不考虑修改的情况下 贡献是如何产生的? 我 ...

  3. NOIP2017 列队 题解报告【56行线段树】

    题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n \times mn×m名学生,方阵的行数 ...

  4. BZOJ3110 K大数查询 【线段树 + 整体二分 或 树套树(非正解)】

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c 如果是2 a b c形式,表示询问从第a个位置到第b个位 ...

  5. mysqldump备份恢复

    数据库的备份恢复是DBA的必修课,本文首先讲解mysqldump完整备份恢复的操作方法,演示数据库完整备份的基本过程.然后再模拟数据库遭遇灾难性破坏,配合bin-log日志实验数据库灾难性恢复的步骤. ...

  6. linux内核分析 第四周 扒开系统调用的三层皮（上）

    一.用户态.内核态和中断处理过程 系统调用是用户通过库函数方式:库函数帮我们把系统调用封装起来. 内核态:高级别执行,可以使用特权指令,访问任意的物理地址. 用户态:低级别执行,代码范围受到限制. C ...

  7. Hbase(一)基础知识

    一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...

  8. 04-树5. File Transfer--并查集

    对于一个集合常见的操作有:判断一个元素是否属于一个集合:合并两个集合等等.而并查集是处理一些不相交集合(Disjoint Sets)的合并及查询问题的有利工具. 并查集是利用树结构实现的.一个集合用一 ...

  9. JSP2 的自定义标签

    在 JSP 中开发标签库只需如下几个步骤 1.开发自定义标签处理类 2.建立一个 *.tld 文件,每个 *.tld 文件对应一个标签库,每个标签库可包含多个标签 3.在 JSP 文件中使用自定义标签 ...

  10. 手脱UPX v0.89.6 - v1.02

    声明: 只为纪录自己的脱壳历程,高手勿喷 这个壳的脱法很多一般都一步直达的,步过我喜欢ESP定律 1.载入OD,在入口下一行ESP定律运行一次 > pushad ; //入口 BE mov es ...