鼠標移入、移出事件、輪播圖

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';
            })
          }