鼠标移入、移出事件、轮播图

1.鼠标移入事件

• mouseover

2.鼠标移出事件

• mouseout

3.排他思想解决Tab栏切换

• 先将所有的样式全部移除，然后再将需要的样式添加上

4.轮播图

			// 当前图片下标
      var currentIndex = 0;
      // 序号按钮控制图片切换及自身样式改变
      var orderBtns = document.querySelectorAll('i');
      var li0 = document.querySelector('li');
      var ul = document.querySelector('ul');
      orderBtns.forEach(function (element, index) {
        element.onmousemove = function () {
          orderBtns.forEach(function (element, index) {
            element.classList.remove('current');
          });
          this.classList.add('current');
          console.log(index * li0.offsetWidth);
          ul.style.left = - index * li0.offsetWidth + 'px';
        };
      });
      // 左右按钮控制图片切换和按钮样式
      var right = document.querySelector('.arrow-right');
      right.onclick = function () {
        currentIndex++;
        currentIndex = currentIndex > 5 ? 0 : currentIndex;
        ul.style.left = - currentIndex * li0.offsetWidth + 'px';
        orderBtns.forEach(function (element, index) {
          element.classList.remove('current');
        });
        orderBtns[currentIndex].classList.add('current');
      };
      var left = document.querySelector('.arrow-left');
      left.onclick = function () {
        currentIndex--;
        currentIndex = currentIndex < 0 ? 5 : currentIndex;
        ul.style.left =  - currentIndex * li0.offsetWidth + 'px';
        orderBtns.forEach(function (element, index) {
          element.classList.remove('current');
        });
        orderBtns[currentIndex].classList.add('current');
      };
      // 自动轮播
      var lunbo = setInterval(function () {
      //   currentIndex++;
      //   currentIndex = currentIndex > 5 ? 0 : currentIndex;
      //   ul.style.left = - currentIndex * li0.offsetWidth + 'px';
      //   orderBtns.forEach(function (element, index) {
      //     element.classList.remove('current');
      //   });
      //   orderBtns[currentIndex].classList.add('current');
        right.onclick();
      }, 1000);

      // 鼠标进入轮播停止，鼠标移出继续轮播
      var inner = document.querySelector('#inner');
      inner.onmouseover = function () {
        clearInterval(lunbo);
      };
      inner.onmouseout = function () {
        lunbo = setInterval(function () {
          right.onclick();
        }, 1000);
      }

5.手风琴

			// 获取所有的li
      var lis = document.querySelectorAll('li');
      // 遍历li
      lis.forEach(function (element, index) {
        // 将每一个li都添加鼠标进入事件
        element.onmouseover = function () {
          // 遍历每一个li，给每一个li的宽度都设置成100px
          lis.forEach(function (element, index) {
            element.style.width = 100 + 'px';
          });
          // 给当前移入到的li的宽度设置成800px
          this.style.width = 800 + 'px';
        };
        // 鼠标移出
        element.onmouseout = function () {
          // 遍历所有的li，给每一个li元素的宽度设置成240px
          lis.forEach(function (element, index) {
            element.style.width = 240 + 'px';
          })
        }
      })

6.旋转木马

      // 1.创建数组，将类名存放起来
      var arr = ['left1', 'left2', 'middle', 'right2', 'right1'];
      // 2.获取每一个li，按照数组中的顺序给li添加类名
      var lis = document.querySelectorAll('li');
      lis.forEach(function (element, index) {
        element.className = arr[index];
      });
      // 3.获取右边按钮将数组中第一个元素删除，push到最后面，将调整后的数组内容添加到li的类名里
      var right = document.querySelector('#arrRight');
      right.onclick = function () {
        arr.push(arr.shift());
        lis.forEach(function (element, index) {
          element.className = arr[index];
        });
      };
      // 4.获取左边按钮将数组中最后一个元素插入到最前面，将调整后的数组内容添加到li的类名里
      var left = document.querySelector('#arrLeft');
      left.onclick = function () {
        arr.unshift(arr.pop());
        lis.forEach(function (element, index) {
          element.className = arr[index];
        });
      };

7.新知识点——动画和过渡结束后执行的事件

• 用addEventListener添加事件

• animationend

  • 动画结束后触发的事件

• transitionend

  • 过度结束后触发的事件

• 开机动画

  • // 1点击关闭按钮，下方盒子高度为0
          // 2当下方盒子过度结束后，box宽度设置为0
          var btn = document.querySelector('#closeButton');
          var bd = document.querySelector('#bottomPart');
          var box = document.querySelector('#box');
          btn.onclick = function (e) {
            bd.style.height = 0 + 'px';
            bd.addEventListener('transitionend', function () {
              box.style.width = 0 + 'px';
            })
          }