基于JavaScript实现图片连播和联级菜单实例代码


Posted in Javascript onJuly 28, 2017

基于JavaScript实现图片连播和联级菜单实例代码

<!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>

总结

以上所述是小编给大家介绍的基于JavaScript实现图片连播和联级菜单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
js获取视频时长代码
Apr 10 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue模板语法-插值详解
Mar 06 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue中七牛插件使用的实例代码
Jul 28 #Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
深入PHP curl参数的详解
2013/06/17 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
浅谈php和.net的区别
2014/09/28 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python ip正则式
2009/05/07 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python的faker库用法
2019/11/28 Python
Python基于内置函数type创建新类型
2020/10/22 Python
学校门卫工作职责
2013/12/07 职场文书
仓库管理制度
2014/01/21 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014年母亲节寄语
2014/05/07 职场文书
解除同居协议书
2015/01/29 职场文书
材料员岗位职责范本
2015/04/11 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书