基于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将json格式内容转换成对象的方法
Nov 01 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php操作mysql数据库的基本类代码
2014/02/25 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
javascript编写简易计算器
2017/05/06 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python fileinput模块使用实例
2015/05/28 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
python元组拆包实现方法
2021/02/28 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
函数指针的定义是什么
2016/08/14 面试题
南京某软件公司的.net面试题
2015/11/30 面试题
岗位职责说明书模板
2014/07/30 职场文书
党员评议个人总结
2014/10/20 职场文书
分居协议书范本
2014/11/03 职场文书
2014年评职称工作总结
2014/11/20 职场文书
Jsonp劫持学习
2021/04/01 PHP
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers