JS-2_js2top-CSDN博客

本文链接：https://blog.csdn.net/LLLLLLLLLLe/article/details/109214353

DOM

标签 CSS
元素 JS
节点 DOM
其实他们都是同类

DOM 节点

// 文本节点
cnjncaknc

// 元素节点
<p> ncjksancakj </p>

子节点：只算下面第一层的节点，如果第一层里面还包括了子节点的话，不往里面算

children 获取子节点（获取的节点只包括元素节点，不包括文本节点）。比childNodes好用
childNodes 获取子节点（获取的节点包括元素节点和文本节点）
- nodeType 节点类型
  - 1 元素节点
  - 3 文本节点
parentNode
不管是什么样的样式，父节点是不变的，除非把样式结构给改了
offsetParent：获取元素在页面上的实际位置
根据样式不同，父节点是会发生变化的
首尾子节点
有兼容性问题
- firstChild / firstElementChild(获取第一个元素子节点)
- lastChild / lastElementChild
兄弟节点
有兼容性问题
- nextSibling / nextElementSibling
- previousSibling / previousElementSibling

<script>
  window.onload = function () {
    var aA = document.getElementsByTagName('a');
    for (var i = 0; i < aA.length; i++){
      aA[i].onclick = function(){
        this.parentNode.style.display = 'none';
      }
    }
  }
</script>

<body>
  <ul id="ul1">
    <li>cnasncla<a href="javascript:;">隐藏</a></li>
    <li>ca smcnas<a href="javascript:;">隐藏</a></li>
    <li>ckldsnlk<a href="javascript:;">隐藏</a></li>
    <li>hiughunbj<a href="javascript:;">隐藏</a></li>
    <li>mkcmsdkl<a href="javascript:;">隐藏</a></li>
  </ul>
</body>

操作元素属性

元素属性操作
- 第一种：oDiv.style.display = ‘block’
- 第二种：oDiv.style[“display”] = ‘block’
- 第三种：DOM方式操作

DOM方式操作元素属性

获取 getAttribute(名称)
设置 setAttribute(名称，值)
删除 removeAttribute(名称)

DOM操作应用

创建DOM元素

createElement(标签名) ：创建一个节点
appendChild(节点)：追加一个节点。其实这个操作分为两步：1.先把元素从原有的父级上面删掉 2.添加到新的父级

<script>
  window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oTxt = document.getElementById('txt1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick = function () {
      var oLi = document.createElement('li');
      oLi.innerHTML = oTxt.value;
      oUl.appendChild(oLi);
    }
  }
</script>

<body>
  <input type="text" id="txt1">
  <input type="button" value="创建li" id="btn1">
  <ul id="ul1"></ul>
</body>

插入元素

insertBefore(节点，原有节点)：在已有元素前插入

appendChild	insertBefore
appendChild(子节点)	insertBefore(子节点，在谁之前)

<script>
  window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oTxt = document.getElementById('txt1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick = function () {
      var oLi = document.createElement('li');
      var aLi = document.getElementsByTagName('li');
      oLi.innerHTML = oTxt.value;

      if (aLi.length > 0) {
        oUl.insertBefore(oLi, aLi[0]);
      } else {
        oUl.appendChild(oLi);
      }
    }
  }
</script>

<body>
  <input type="text" id="txt1">
  <input type="button" value="创建li" id="btn1">
  <ul id="ul1"></ul>
</body>

删除DOM元素

removeChild(节点)：删除一个节点

<script>
  window.onload = function () {
    var aA = document.getElementsByTagName('a');
    var oUl = document.getElementById('ul1');

    for (var i = 0; i < aA.length; i++) {
      aA[i].onclick = function () {
        oUl.removeChild(this.parentNode);
      }
    }
  }
</script>

<body>
  <ul id="ul1">
    <li>cbjkbj <a href="javascript:;">删除</a></li>
    <li>reqwdq <a href="javascript:;">删除</a></li>
    <li>gtrbrg <a href="javascript:;">删除</a></li>
    <li>bgbf <a href="javascript:;">删除</a></li>
  </ul>
</body>

文档碎片

document.createDocumentFragment()：插入文档碎片。可以把本来要一个一个插入到ul中的li先一个一个插入到文档碎片中，然后将文档碎片直接插入到ul中，在IE浏览器中可以提高性能。

DOM操作高级应用

表格应用
一个表格可以有很多个tbody，但是只有一个 tHead 和 tFoot，所以说 tHead 和 tFoot 不是数组，而是直接的元素。

tBodies/row/cell

<script>
  window.onload = function () {
    var oTab = document.getElementById("tab1");
    var michelle = oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1]
      .innerHTML;
    var michelle2 = oTab.tBodies[0].rows[1].cells[1].innerHTML;
    console.log(michelle2); // michelle
  }
</script>

<body>
  <table id="tab1" border="1" width="500">
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>doris</td>
        <td>18</td>
      </tr>
      <tr>
        <td>002</td>
        <td>michelle</td>
        <td>16</td>
      </tr>
      <tr>
        <td>003</td>
        <td>annie</td>
        <td>17</td>
      </tr>
      <tr>
        <td>004</td>
        <td>dora</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</body>

模糊搜索

<script>
  window.onload = function () {
    var oTab = document.getElementById("tab1");
    var oTxt = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function () {
      for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
        var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt = oTxt.value.toLowerCase();

        if (sTab.search(sTxt) !== -1) {
          oTab.tBodies[0].rows[i].style.background = 'pink';
        } else {
          oTab.tBodies[0].rows[i].style.background = '';
        }
      }
    }

  }
</script>

<body>
  姓名：<input type="text" id="name">
  <input type="button" value="搜索" id="btn1">
  <table id="tab1" border="1" width="500">
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>doris</td>
        <td>18</td>
      </tr>
      <tr>
        <td>002</td>
        <td>michelle</td>
        <td>16</td>
      </tr>
      <tr>
        <td>003</td>
        <td>annie</td>
        <td>17</td>
      </tr>
      <tr>
        <td>004</td>
        <td>dora</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</body>

多关键词搜索

split() 分割

<script>
  window.onload = function () {
    var oTab = document.getElementById("tab1");
    var oTxt = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function () {
      for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
        var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt = oTxt.value.toLowerCase();

        var arr = sTxt.split(' ');
        oTab.tBodies[0].rows[i].style.background = '';

        for (var j = 0; j < arr.length; j++) {
          if (sTab.search(arr[j]) != -1) {
            oTab.tBodies[0].rows[i].style.background = 'pink';
          }
        }
      }
    }
  }
</script>

<body>
  姓名：<input type="text" id="name">
  <input type="button" value="搜索" id="btn1">
  <table id="tab1" border="1" width="500">
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>doris</td>
        <td>18</td>
      </tr>
      <tr>
        <td>002</td>
        <td>michelle</td>
        <td>16</td>
      </tr>
      <tr>
        <td>003</td>
        <td>annie</td>
        <td>17</td>
      </tr>
      <tr>
        <td>004</td>
        <td>dora</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</body>

排序

<script>
  window.onload = function () {
    var oTab = document.getElementById('tab1');
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = function () {
      var arr = [];
      for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
        // 先将表格中所有的行rows全都推进arr数组中
        arr[i] = oTab.tBodies[0].rows[i];
      }

      // 将arr数组进行排序
      arr.sort(function (tr1, tr2) {
        var n1 = parseInt(tr1.cells[0].innerHTML);
        var n2 = parseInt(tr2.cells[0].innerHTML);
        return n1 - n2;
      })

      // 按照数组中排好序的顺序，将所有的tr重新插入一次
      for (var i = 0; i < arr.length; i++) {
        oTab.tBodies[0].appendChild(arr[i]);
      }
    }
  }
</script>

<body>
  <input type="button" value="排序" id="btn1">
  <table id="tab1" border="1" width="500">
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>004</td>
        <td>dora</td>
        <td>20</td>
      </tr>
      <tr>
        <td>001</td>
        <td>doris</td>
        <td>18</td>
      </tr>
      <tr>
        <td>003</td>
        <td>annie</td>
        <td>17</td>
      </tr>
      <tr>
        <td>002</td>
        <td>michelle</td>
        <td>16</td>
      </tr>
    </tbody>
  </table>
</body>

表单应用

向服务器提交数据。

action 提交到哪去
onsubmit 提交时发生
onreset 重置时发生
onkeyup 输入时验证
onblur 失焦时验证

JS运动

匀速运动

方块运动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<script>
  var timer = null;

  function startMove() {
    var oDiv = document.getElementById('div1');
    var speed = 1;

    // 先将以前开过的定时器关闭，避免因为多次点击按钮后开了多个定时器从而让速度越来越快
    clearInterval(timer);
    timer = setInterval(function () {
      // offsetLeft的作用就是取div的位置
      if (oDiv.offsetLeft >= 300) {
        clearInterval(timer);
      } else {
        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
      }
    }, 30)
  }
</script>

<body>
  <input type="button" value="开始运动" id="btn1" onclick="startMove()">
  <div id="div1"></div>
</body>

</html>

运动框架

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #div1 {
      width: 150px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      top: 50px;
      left: -150px;
    }

    #div1 span {
      position: absolute;
      width: 20px;
      height: 60px;
      line-height: 20px;
      background: lightseagreen;
      right: -20px;
      top: 70px;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function () {
      startMove(0);
    }

    oDiv.onmouseout = function () {
      startMove(150);
    }
  }
  var timer = null;

  function startMove(iTarget, speed) {
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function () {
      var speed = 0;

      // 通过现在位置和目标位置来判断speed从而判断向左还是向右
      if (oDiv.offsetLeft > iTarget) {
        speed = -10;
      } else {
        speed = 10;
      }

      if (oDiv.offsetLeft === iTarget) {
        clearInterval(timer);
      } else {
        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
      }
    })
  }
</script>

<body>
  <div id="div1">
    <span>分享到</span>
  </div>
</body>

</html>

淡入淡出

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      background: lightcoral;
      opacity: 0.3;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;

  function startMove(iTarget) {
    var oDiv = document.getElementById('div1');
    timer = setInterval(function () {
      var speed = 0;
      if (alpha < iTarget) {
        speed = 10;
      } else {
        speed = -10;
      }

      if (alpha === iTarget) {
        clearInterval(timer);
      } else {
        alpha += speed;
        oDiv.style.opacity = alpha / 100;
      }
    }, 30)
  }
</script>

<body>
  <div id="div1">
  </div>
</body>

</html>

缓冲运动

⚠️ 速度取整

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      left: 0;
      top: 50px;
    }

    #div2 {
      width: 1px;
      height: 300px;
      position: absolute;
      left: 300px;
      top: 0;
      background: black;
    }
  </style>
</head>
<script>
  function startMove() {
    var oDiv = document.getElementById('div1');
    setInterval(function () {
      // 这块除以10的理解：
      // 当物体和目标距离为300时，除以10之后的速度为30
      // 当物体和目标具体为30时，除以10之后的速度为3
      // 所以速度就是先快后慢

      // 但是这块运动完毕之后并没有完全到300的那条线那去
      // 是因为这块的最后距离并没有到，像素计算的原因（比如有的时候290和290.5的效果是一样的）
      var speed = (300 - oDiv.offsetLeft) / 10;

      // 需要用到向上/向下取整的方法将正负0.9取到1，这时就还可以往上走了
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      oDiv.style.left = oDiv.offsetLeft + speed + 'px';
    }, 30)
  }
</script>

<body>
  <input type="button" value="开始移动" onclick="startMove()">
  <div id="div1"></div>
  <div id="div2"></div>
</body>

</html>

底部悬浮框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      height: 3000px;
    }

    #div1 {
      width: 200px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<script>
  window.onscroll = function () {
    var oDiv = document.getElementById('div1');
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    // oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight.scrollTop + 'px';
    startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop)
  }

  var timer = null;

  function startMove(iTarget) {
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function () {
      var speed = (iTarget - oDiv.offsetTop) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (oDiv.offsetTop == iTarget) {
        clearInterval(timer);
      } else {
        oDiv.style.top = oDiv.offsetTop + speed + 'px';
      }
    }, 30)
  }
</script>

<body>
  <div id="div1"></div>
</body>

</html>

对联悬浮框

就是随着桌面的滑动让这个悬浮框一直定位在右侧中间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      height: 3000px;
    }

    #div1 {
      width: 100px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<script>
  window.onscroll = function () {
    var oDiv = document.getElementById('div1');
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    // oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight.scrollTop + 'px';
    startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop))
  }

  var timer = null;

  function startMove(iTarget) {
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function () {
      var speed = (iTarget - oDiv.offsetTop) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (oDiv.offsetTop == iTarget) {
        clearInterval(timer);
      } else {
        oDiv.style.top = oDiv.offsetTop + speed + 'px';
      }
    }, 30)
  }
</script>

<body>
  <div id="div1"></div>
</body>

</html>

匀速运动的停止

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #div1 {
      width: 100px;
      height: 200px;
      background: lightcoral;
      position: absolute;
      left: 0;
      top: 50px;
    }

    #div2 {
      width: 1px;
      height: 300px;
      position: absolute;
      left: 300px;
      top: 0;
      background: black;
    }

    #div3 {
      width: 1px;
      height: 300px;
      position: absolute;
      left: 100px;
      top: 0;
      background: black;
    }
  </style>
</head>
<script>
  var timer = null;

  function startMove(iTarget) {
    var oDiv = document.getElementById('div1');
    timer = setInterval(function () {
      var speed = 0;
      if (oDiv.offsetLeft < iTarget) {
        speed = 7;
      } else {
        speed = -7;
      }

      if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) {
        clearInterval(timer);
        oDiv.style.left = iTarget + 'px';
      } else {
        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
      }

    }, 30)
  }
</script>

<body>
  <input type="button" value="到100" onclick="startMove(100)">
  <input type="button" value="到300" onclick="startMove(300)">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>

多个物体同时运动

每个物体有一个定时器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 50px;
      background: lightcoral;
      margin: 10px;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv = document.getElementsByTagName('div');
    for (var i = 0; i < oDiv.length; i++) {
      oDiv[i].timer = null;
      oDiv[i].onmouseover = function () {
        startMove(this, 400);
      }

      oDiv[i].onmouseout = function () {
        startMove(this, 100);
      }
    }
  }
  // var timer = null;

  function startMove(obj, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var speed = (iTarget - obj.offsetWidth) / 6;
      speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (obj.offsetWidth === iTarget) {
        clearInterval(obj.timer);
      } else {
        obj.style.width = obj.offsetWidth + speed + 'px';
      }
    }, 30)
  }
</script>

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

多物体运动框架

在多物体框架里面，所以东西都不能公用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: lightcoral;
      float: left;
      margin: 20px;
      opacity: 0.3;
      border: 1px solid black;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

    oDiv1.onmouseover = function () {
      startMove(this, 'height', 400)
    }
    oDiv1.onmouseout = function () {
      startMove(this, 'height', 200)
    }

    oDiv2.onmouseover = function () {
      startMove(this, 'width', 400)
    }
    oDiv2.onmouseout = function () {
      startMove(this, 'width', 200)
    }
  }

  function getStyle(obj, name) {
    return getComputedStyle(obj, false)[name];
  }

  function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var cur = parseInt(getStyle(obj, attr));
      var speed = (iTarget - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (cur === iTarget) {
        clearInterval(obj.timer);
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }, 30)
  }
</script>

<body>
  <div id="div1">变宽</div>
  <div id="div2">变高</div>

</body>

</html>

任意值运动框架

Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: lightcoral;
      float: left;
      margin: 20px;
      opacity: 0.3;
      border: 1px solid black;
      opacity: 0.3;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

    oDiv1.onmouseover = function () {
      startMove(this, 'width', 100)
    }
    oDiv1.onmouseout = function () {
      startMove(this, 'width', 30)
    }

  }

  function getStyle(obj, name) {
    return getComputedStyle(obj, false)[name];
  }

  function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var cur = 0;
      if (attr === "opacity") {
        cur = parseFloat(getStyle(obj, attr)) * 100;
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      var speed = (iTarget - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (cur === iTarget) {
        clearInterval(obj.timer);
      } else {
        if (attr === 'opacity') {
          obj.style.opacity = (cur + speed) / 100;
        } else {
          obj.style[attr] = cur + speed + 'px';
        }
      }
    }, 30)
  }
</script>

<body>
  <div id="div1"></div>
</body>

</html>

仿flash图片展示

move.js

function getStyle(obj, name) {
  return getComputedStyle(obj, false)[name];
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var cur = 0;
    if (attr === "opacity") {
      cur = parseFloat(getStyle(obj, attr)) * 100;
    } else {
      cur = parseInt(getStyle(obj, attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    if (cur === iTarget) {
      clearInterval(obj.timer);
    } else {
      if (attr === 'opacity') {
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }
  }, 30)
}

style.css

body{ background: #666; }
ul{ padding: 0; margin: 0; }
li{ list-style: none; }
img{ border: 0; }

.play{ width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px; }
.big_pic{
  width: 400px;
  height: 320px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background: #222;
  position: relative;
}

.big_pic li {
  width: 400px;
  height: 320px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-image: url(img/img_6.jpeg) no-repeat center center;
}

.mark-left{
  width: 200px;
  height: 320px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  opacity: 0;
  z-index: 3000;
}

.mark-right{
  width: 200px;
  height: 320px;
  position: absolute;
  top: 0;
  left: 200px;
  background: green;
  opacity: 0;
  z-index: 3000;
}

.big_pic .prev{
  width: 60px;
  height: 60px;
  background: url(img/img_6.jpeg) no-repeat;
  position: absolute;
  top: 130px;
  left: 10px;
  z-index: 3001;
  opacity: 0;
  cursor: pointer;
}

.big_pic .next{
  width: 60px;
  height: 60px;
  background: url(img/img_6.jpeg) no-repeat 0 -60px;
  position: absolute;
  top: 130px;
  right: 10px;
  z-index: 3001;
  opacity: 0;
  cursor: pointer;
}

.big_pic.text{
  position: absolute;
  left: 10px;
  top: 302px;
  z-index: 3000;
  color: #ccc;
}

.big_pic .length{
  position: absolute;
  right: 10px;
  bottom: 4px;
  z-index: 3000;
  color: #ccc;
}

.big_pic .bg{
  width: 400px;
  height: 25px;
  background: #000;
  opacity: 0.6;
  position: absolute;
  z-index: 2999;
  bottom: 0;
  left: 0;
}

.small_pic {
  width: 380px;
  height: 94px;
  position: relative;
  top: 7px;
  left: 10px;
  overflow: hidden;
}

.small_pic ul{
  height: 94px;
  position: absolute;
  top: 0;
  left: 0;
}

.small_pic li{
  width: 120px;
  height: 94px;
  float: left;
  padding-right: 10px;
  /* background: url(img/img_6.jpeg) no-repeat center center; */
  cursor: pointer;
  opacity: 0.6;
}

.small_pic img{
  width: 120px;
  height: 94px;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="move.js"></script>
  <style></style>

</head>
<script>
  function getByClass(oParent, sClass) {
    var aEle = oParent.getElementByTagName('*');
    var aResult = [];

    for (var i = 0; i < aEle.length; i++) {
      if (aEle[i].className === sClass) {
        aResult.push(aEle[i]);
      }
    }
  }


  window.onload = function () {
    var oDiv = document.getElementById('playimages');
    var oBtnPrev = getByClass(oDiv, 'prev')[0];
    var oBtnNext = getByClass(oDiv, 'next')[0];

    var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
    var oMarkRight = getByClass(oDiv, 'mark_right')[0];

    var oDivSmall = getByClass(oDiv, 'small_pic')[0];

    var oUlSmall = oDivSmall.getElementByTagName('ul')[0];
    var aLiSmall = oDivSmall.getElementByTagName('li');

    var nowZIndex = 2;
    var now = 0;

    oUlSmall.style.width = aLiSmall.length.aLiSmall[0].offsetWidth + 'px';

    var oUlBig = getByClass(oDiv, 'big_pic')[0];
    var aLiBig = oUlBig.getElementByTagName('li');


    // 左右按钮
    oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
      startMove(oBtnPrev, 'opacity', 100)
    }
    oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
      startMove(oBtnPrev, 'opacity', 0)
    }
    oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
      startMove(oBtnNext, 'opacity', 100)
    }
    oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
      startMove(oBtnNext, 'opacity', 0)
    }

    // 大图切换
    for (var i = 0; i < aLiSmall.length; i++) {
      aLiSmall[i].index = i;
      aLiSmall[i].onclick = function () {
        // 当点击小图的时候，应该把大图的层级往上提

        if (this.index === now) return;

        now = this.index;

        tab();
      }

      aLiSmall[i].onmouseover = function () {
        startMove(this, 'opacity', 100)
      }

      aLiSmall[i].onmouseout = function () {
        if (this.index != 0) {
          startMove(this, 'opacity', 60);
        }
      }
    }

    function tab() {
      aLiBig[now].style.zIndex = nowZIndex++;

      for (var i = 0; i < aLiSmall.length; i++) {
        startMove(aLiSmall[i], 'opacity', 60)
      }
      startMove(aLiSmall[now], 'opacity', 100);

      aLiBig[now].style.height = 0;
      startMove(aLiBig[now], 'height', 320);

      // 小图滚动
      if (now === 0) {
        // 当是第一张时，永远贴着左边
        startMove(oUlSmall, 'left', 0);
      } else if (now === aLiSmall.length - 1) {
        // 当时最后一张时，永远贴着右边
        startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth)
      } else {
        // 中间的滑动
        startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);
      }

    }


    oBtnPrev.onclick = function () {
      now--;
      if (now === -1) {
        now = aLiSmall.length - 1;
      }

      tab();
    }

    oBtnNext.onclick = function () {
      now++;
      if (now === aLiSmall.length) {
        now = 0;
      }
      tab();
    }

    // 下方小图自动播放
    var timer = setInterval(oBtnNext.onclick, 2000);

    oDiv.onmouseover = function () {
      clearInterval(timer);
    }

    oDiv.onmouseout = function () {
      timer = setInterval(oBtnNext.onclick, 2000);
    }

  }
</script>

<body>
  <div id="playimages" class="play">
    <ul class="big_pic">
      <div class="prev"></div>
      <div class="next"></div>

      <div class="text">加载图片说明...</div>
      <div class="length">计算图片上说明...</div>

      <a href="javascript:;" class="mark_left"></a>
      <a href="javascript:;" class="mark_right"></a>
      <div class="bg"></div>

      <li style="z-index: 1"><img src="img/img_1.jpeg" alt=""></li>
      <li><img src="img/img_2.jpeg" alt=""></li>
      <li><img src="img/img_3.jpeg" alt=""></li>
      <li><img src="img/img_4.jpeg" alt=""></li>
      <li><img src="img/img_5.jpeg" alt=""></li>
    </ul>
    <div class="small_pic">
      <ul style="width: 390px">
        <li style="filter: 100;opacity: 1;"><img src="img/img_1.jpeg" alt=""></li>
        <li><img src="img/img_2.jpeg" alt=""></li>
        <li><img src="img/img_3.jpeg" alt=""></li>
        <li><img src="img/img_4.jpeg" alt=""></li>
        <li><img src="img/img_5.jpeg" alt=""></li>
      </ul>
    </div>
  </div>
</body>
</html>