[javascript]运用自定义属性获取点击按钮更换图片

//内容
<div id="header">
  <ul id="nav">
    <li class="active" data-id ="1">点击</li>　　//默认第一个为显示点击状态
    <li data-id ="2">点击</li>　　　　　　　　　　　//data-id是自定义id
    <li data-id ="3">点击</li>
    <li data-id ="4">点击</li>
    <li data-id ="5">点击</li>
  </ul>
  <div id="pic">
    <img id="img" src="images/index_slide_con01.png" alt="">　　//默认显示第一张图片
  </div>
</div>

//css样式
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul li{
      list-style-type: none;
    }
    #header{
      width: 1900px;
      height: 400px;
      background-color: rgb(221,95,3);
      position: relative;
    }
    #nav{
      overflow: hidden;
      position: absolute;
      left:450px;
      bottom: 0;
    }
    #nav li{
      float: left;
      width: 200px;
      height: 50px;
      background-color: rgb(234,158,104);
      text-align: center;
      line-height: 50px;
      color: #bd2c00;
      margin-top: 10px;
      cursor: pointer;
      transition: all 200ms linear;
    }
    #pic{
      text-align: center;
    }
    #nav li.active{
      margin-top: 0;　　//调整点击按钮发生改变的高度
      height: 60px;
    background-color: rgb(237,174,127);
    }
  </style>

//Js部分
<script>
  var nav =document.getElementById("nav");
  var liArr = document.getElementsByTagName("li");
  var picArr = ["images/index_slide_con01.png","images/index_slide_con02.png","images/index_slide_con03.png","images/index_slide_con04.png","images/index_slide_con05.png"];
  var pic = document.getElementById("pic");
  var Img = document.getElementById("img");
  var p = 0;//
  //for加载页面时执行
  for (var i = 0; i < liArr.length; i++){
      liArr[i].onclick=navChange;　　//这里为点击状态才执行下一个函数
      }
      function navChange() {　　//点击按钮切换图片
        // console.log(this);
          clearLiClassName();　　//调用清空li的class函数
          this.className="active";　　//点击时执行这个class
          var id = this.getAttribute("data-id");　　//获取自定义id
          document.getElementById("img").src = picArr[(id-1)]　　//因为数组默认从0开始计算所有id-1获取picArr里面对应的图片
      }
　　　　//清除li的class
      function  clearLiClassName() {
          for (var i = 0; i < liArr.length; i++){
                          liArr[i].className="";
      }
    }
</script>
</body>
</html>