基于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 相关文章推荐
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
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
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python深入学习之对象的属性
2014/08/31 Python
寻找网站后台地址的python脚本
2014/09/01 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python自动创建Excel并获取内容
2020/09/16 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
物业管理应届生求职信
2013/10/28 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
班班通校本培训方案
2014/03/12 职场文书
个人借款协议书范本
2014/11/17 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python