<!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. 【Visual Installer】如何读取与写入注册表信息

    引入:using Microsoft.Win32; (1)读取注册表信息 代码: RegistryKey rsg = null; rsg = Registry.LocalMachine.OpenSub ...

  2. NOIP模拟

    1.要选一个{1,2,...n}的子集使得假如a和b在所选集合里且(a+b)/2∈{1,2,...n}那么(a+b)/2也在所选集合里 f[i]=2*f[i-1]-f[i-2]+g[i] g[n]:选 ...

  3. P3932 浮游大陆的68号岛 【线段树】

    P3932 浮游大陆的68号岛 有一天小妖精们又在做游戏.这个游戏是这样的. 妖精仓库的储物点可以看做在一个数轴上.每一个储物点会有一些东西,同时他们之间存在距离. 每次他们会选出一个小妖精,然后剩下 ...

  4. Linux集群--指定各个机器名字

    centOS7设置主机名:命令hostname可以查看当前主机名 虚招(临时的):重启机器后失效: hostname  XXX 实招(永久的): 招式一: 将/etc/sysconfig/networ ...

  5. CSS盒子知识

    此随笔写于学习完CSS盒子之后,所遇到的问题和感悟记录. 1.IE盒子: IE盒子的特性:对于IE浏览器来说width不是内容宽度.而是内容+外边距+边框的内容总和. 也就是说当盒子增加10px;那么 ...

  6. HTML 5 Web 存储：localStorage和sessionStorage

    本文内容摘自http://www.w3school.com.cn/ 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessi ...

  7. 20155117王震宇 2016-2017-2 《Java程序设计》第八周学习总结

    教材学习内容总结 正则表达式 正则表达式是记录文本规则的代码 元字符 ^ :^会匹配行或者字符串的起始位置,有时还会匹配整个文档的起始位置. $ :$会匹配行或字符串的结尾. \b :不会消耗任何字符 ...

  8. Findbugs插件安装与使用

    FindBugs 是由马里兰大学提供的一款开源 Java静态代码分析工具.FindBugs通过检查类文件或 JAR文件,将字节码与一组缺陷模式进行对比从而发现代码缺陷,完成静态代码分析.FindBug ...

  9. NYOJ 35 表达式求值 （字符串处理）

    题目链接 描述 ACM队的mdd想做一个计算器,但是,他要做的不仅仅是一计算一个A+B的计算器,他想实现随便输入一个表达式都能求出它的值的计算器,现在请你帮助他来实现这个计算器吧. 比如输入:&quo ...

  10. jquery.cookie.js——jquery的cookie插件

    一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...