基于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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
Python多线程和队列操作实例
2015/06/21 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python3使用GUI统计代码量
2019/09/18 Python
html5 标签
2009/07/16 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
上班迟到检讨书
2014/01/10 职场文书
报社实习生自荐信
2014/01/24 职场文书
触电现场处置方案
2014/05/14 职场文书
运动会宣传口号
2014/06/09 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
先进工作者事迹材料
2014/12/23 职场文书
工程移交协议书
2016/03/24 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers