Liveor_Die的博客

编程的学习笔记,大家喜欢我的博客的话可以加我的微信公众号(java编程学习总结)...

用js实现图片连播和联级菜单的实现

这里写图片描述

<!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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Liveor_Die/article/details/76216284
个人分类: javascript 实战项目
想对作者说点什么? 我来说一句

js实现无限级菜单(jQuery)

2011年08月29日 63KB 下载

动态联级菜单js文件

2009年09月17日 7KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭