原生JS輪播-各類效果的極簡實現（二）面向對象版本的實現和優化

時間 2019-11-24

原文原文鏈接

以前寫了一篇原生JS輪播，不過是非面向對象的，而且也沒有添加上自動輪播。這裏來寫一下如何優化和進階。

這裏簡單地介紹一下以前的代碼,這是html結構javascript

<body>
  <div class="wrap">
    <ul class="pic-group">
      <li><img src="./pic1.jpg" alt=""></li>
      <li><img src="./pic2.jpg" alt=""></li>
      <li><img src="./pic3.jpg" alt=""></li>
      <li><img src="./pic4.jpg" alt=""></li>
      <li><img src="./pic5.jpg" alt=""></li>
    </ul>
    <ol class="num-group">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>

css結構css

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul, li {
      list-style: none;
    }
    body {
      background-color: #000;
    }
    .wrap {
      position: relative;
      border: 8px solid #fff;
      margin: 100px auto;
      width: 400px;
      height: 250px;
      overflow: hidden;
    }
    .pic-group {
      position: absolute;
    }
    .pic-group li img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .num-group {
      position: absolute;
      bottom: 5px;
      right: 0;
      height: 20px;
    }
    .num-group li {
      float: left;
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 10px;
      margin-right: 10px;
      background-color: #089e8a;
      color: #eee;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
      opacity: 0.8;
    }
    .num-group li:hover {
      box-shadow: 0 0 18px #000;
    }
    .num-group li.current {
      opacity: 1;
      color: #089a8a;
      background-color: #000;
    }
  </style>

JS 結構html

const oImage = document.getElementsByClassName("pic-group")[0];
const oNumber = document.getElementsByClassName("num-group")[0];
const numList = oNumber.getElementsByTagName("li");
for (let i = 0; i < numList.length; i++) {
  numList[i].onmouseover = () => {
    clearNumState();
    show(i);
  }
}
const clearNumState = () => {
  for (const item of numList) {
    item.className = "";
  }
}
let timer = null;
const show = (index) => {
  numList[index].className = "current";
  if (timer) clearInterval(timer);
  const target = -250 * index;
  let now = oImage.offsetTop;
  timer = setInterval(() => {
    if (now === target) {
      clearInterval(timer);
    } else {
      now += move(target);
      oImage.style.top = now + "px";
      console.log(oImage.offsetTop);
    }
  }, 20);
}
const move = (target) => {
  // 當前值
  const now = oImage.offsetTop;
  const differ = target - now;
  console.log(differ / 10);
  const res = differ > 0 ? Math.ceil(differ / 10) : Math.floor(differ / 10);
  return res;
}

進階1：咱們能夠經過`offsetHeight`獲取圖片元素的高度。好處1是咱們的移動函數不用限死。也爲後來將其變爲通用的一組代碼作鋪墊。

這裏遇到一個不應出現的問題。經常咱們看到直接獲取高度的時候是 0，緣由是：一些元素是根據內容的高度自動調整的，即所謂的自適應高度，它的高度取決於內容的多少。

獲取這樣的`自適應高度`元素主要有兩種辦法

currentStyle
offsetHeight

但用在這裏個人`offsetHeight`居然是0？不是說好了能獲取自適應高度的嗎！

const oHeight = oImage.getElementsByTagName("li")[0].offsetHeight;
console.log(oHeight);   // 0 !!! 0 !!!

通過個人發現，我知道了問題出在這裏？JS代碼跑完了？可是圖片是否加載完畢了呢?

window.onload = function() {
  const oT = document.getElementsByClassName("pic-group")[0];
  const oI = oT.getElementsByTagName("li");
  console.log(oI[0].offsetHeight);   // 250
}

圖片沒有加載完。固然這裏還有一個疑問，爲何控制檯有了答案？(這個留待之後探究)

http://www.javashuo.com/article/p-hrrxznxw-du.html
這裏第 5 句正是解答，圖片還在加載中，先執行了代碼。java

那麼，解決方案是什麼呢？

咱們須要的是等圖片加載完後執行JS的辦法
http://www.jb51.net/article/79233.htmasync

思前想後，這只是個簡單的輪播，我選擇了`window.onload`，還有一個不太破壞代碼的是`async/await`，但是那須要加載新的庫支持，因此這裏選擇了最開始的`window.onload`。

進階2：添加自動輪播，同時，咱們也能夠發現，`clearNumState`應該放在`show函數`裏面

const oImage = document.getElementsByClassName("pic-group")[0];
const oNumber = document.getElementsByClassName("num-group")[0];
const numList = oNumber.getElementsByTagName("li");
const imageList = oImage.getElementsByTagName("li");
const oHeight = imageList[0].offsetHeight;
for (let i = 0; i < numList.length; i++) {
  numList[i].onmouseover = () => {
    // clearNumState();
    show(i);
  }
}
const clearNumState = () => {
  for (const item of numList) {
    item.className = "";
  }
}
let timer = null;
const show = (index) => {
  clearNumState();
  numList[index].className = "current";
  if (timer) clearInterval(timer);
  const target = -oHeight * index;
  let now = oImage.offsetTop;
  timer = setInterval(() => {
    if (now === target) {
      clearInterval(timer);
    } else {
      now += move(target);
      oImage.style.top = now + "px";
      console.log(oImage.offsetTop);
    }
  }, 20);
}
const move = (target) => {
  const now = oImage.offsetTop;
  const differ = target - now;
  console.log(differ / 10);
  const res = differ > 0 ? Math.ceil(differ / 10) : Math.floor(differ / 10);
  return res;
}
let autoTimer = null;
let index = 0;
const auto = () => {
  autoTimer = setInterval(() => {
    show(index);
    index < numList.length - 1 ? index++ : index = 0;
  }, 2000);
}
auto();

進階3：還須要添加上鼠標移動先後的東西

oImage.onmouseover = function() {
    if (autoTimer) clearInterval(autoTimer);
  }
  oImage.onmouseout = function() {
    auto();
  }

進階4：細節優化：關於咱們如果咱們恰好按到當前顯示的輪播頁，這個時間問題，就跟下面一塊兒寫了~

進階5：最後就是將代碼模式變爲面向對象的模式，使得同一頁面上的多個輪播結構可以一塊兒進行。這裏的改動比較大，就直接上代碼了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul, li {
      list-style: none;
    }
    body {
      background-color: #000;
    }
    .wrap {
      position: relative;
      border: 8px solid #fff;
      margin: 100px auto;
      width: 400px;
      height: 250px;
      overflow: hidden;
    }
    .pic-group {
      position: absolute;
    }
    .pic-group li img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .num-group {
      position: absolute;
      bottom: 5px;
      right: 0;
      height: 20px;
    }
    .num-group li {
      float: left;
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 10px;
      margin-right: 10px;
      background-color: #089e8a;
      color: #eee;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
      opacity: 0.8;
    }
    .num-group li:hover {
      box-shadow: 0 0 18px #000;
    }
    .num-group li.current {
      opacity: 1;
      color: #089a8a;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul class="pic-group">
      <li><img src="./pic1.jpg" alt=""></li>
      <li><img src="./pic2.jpg" alt=""></li>
      <li><img src="./pic3.jpg" alt=""></li>
      <li><img src="./pic4.jpg" alt=""></li>
      <li><img src="./pic5.jpg" alt=""></li>
    </ul>
    <ol class="num-group">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
<script type="text/javascript">
var Carousel = function(cname) {
  this.init(cname);
}
Carousel.prototype = {
  init: function(cname) {
    let me = this;
    me.oWrap = document.getElementsByClassName(cname)[0];
    me.oImage = me.oWrap.getElementsByTagName("ul")[0];
    me.imageList = me.oImage.getElementsByTagName("li");
    me.imageHeight = me.imageList[0].offsetHeight;
    me.oNumber = me.oWrap.getElementsByTagName("ol")[0];
    me.numberList = me.oNumber.getElementsByTagName("li");
    me.index = 0;
    me.moveTimer = null;
    me.autoTimer = null;
    for (let i = 0; i < me.numberList.length; i++) {
      me.numberList[i].onmouseover = function() {
        me.index = i;
        me.Show(i);
      }
    }
    me.Auto();
    me.oImage.onmouseover = function() {
      clearInterval(me.autoTimer);
    }
    me.oImage.onmouseout = function() {
      me.Auto();
    }
  },
  Show: function(index) {
    let me = this;
    me.clearClass(index);
    me.Move(index);
  },
  Move(index) {
    let me = this;
    let target = -index * me.imageHeight;
    let now;
    let speed;
    if (me.moveTimer) clearInterval(me.moveTimer);
    me.moveTimer = setInterval(() => {
      now = me.oImage.offsetTop;
      speed = (target - now) / 10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      now === target ? clearInterval(me.moveTimer) : me.oImage.style.top = now + speed + "px";
    }, 20);
  },
  Auto() {
    let me = this;
    me.autoTimer = setInterval(() => {
      me.index < me.imageList.length - 1 ? me.index++ : me.index = 0;
      me.Show(me.index);
    }, 2000);
  },
  clearClass(index) {
    let me = this;
    for (let i = 0; i < me.numberList.length; i++) {
      me.numberList[i].className = "";
    }
    me.numberList[index].className = "current";
  }
}
window.onload = function() {
  new Carousel("wrap");
}
</script>
</html>