JavaScript實(shí)現(xiàn)輪播圖效果

更新時(shí)間：2020年10月30日 11:14:14 作者：火星飛鳥

這篇文章主要介紹了JavaScript實(shí)現(xiàn)輪播圖效果，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下

要求：

鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理
圖片播放的同時(shí)，下面小圓圈模塊跟隨一起變化
點(diǎn)擊小圓圈，可以播放相應(yīng)圖片
鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會(huì)自動(dòng)播放圖片
鼠標(biāo)經(jīng)過，輪播圖模塊，自動(dòng)播放停止

代碼實(shí)現(xiàn)：

autoPlay.html（復(fù)制并保存為html文件，打開即可見效果）：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet"  rel="external nofollow" >
  <script src="https://blog-static.cnblogs.com/files/jacklzx/animate.js"></script>
  <script src="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js"></script>
</head>

<body>
  <div class="focus">
    <!-- 左側(cè)按鈕 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-l">&lt;</a>
    <!-- 右側(cè)按鈕 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-r">&gt;</a>
    <!-- 滾動(dòng)區(qū)域 -->
    <ul>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt=""></a>
      </li>
    </ul>
    <!-- 小圓圈 -->
    <ol class="circle">
    </ol>
  </div>
</body>

</html>

autoPlay.css：

li {
  list-style: none;
}

a {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #00e1ff;
}

.focus {
  overflow: hidden;
  position: relative;
  width: 721px;
  height: 455px;
  margin: 100px auto;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  border-radius: 40px;
}

.focus ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}

.focus ul li {
  float: left;
}

.arrow-l {
  display: none;
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 0 50% 50% 0;
  z-index: 999;
}

.arrow-r {
  display: none;
  position: absolute;
  top: 50%;
  right: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 50% 0 0 50%;
  z-index: 999;
}

.circle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.circle li {
  float: left;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, .5);
  margin: 0 4px;
  border-radius: 50%;
  cursor: pointer;
}

.current {
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
}

autoPlay.js：

window.addEventListener('load', function() {
  // 獲取元素
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  // 自定義動(dòng)畫函數(shù)animate的參數(shù)，表示動(dòng)畫間隔
  var step = 5;
  // 鼠標(biāo)經(jīng)過focus 就顯示左右按鈕，停止計(jì)時(shí)器
  focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null; // 清空計(jì)時(shí)器
  });
  // 鼠標(biāo)離開focus 就隱藏左右按鈕，調(diào)用定時(shí)器
  focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function() {
      // 手動(dòng)調(diào)用點(diǎn)擊事件
      arrow_r.click();
    }, 2000);
  });

  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  for (var i = 0; i < ul.children.length; i++) {
    // 創(chuàng)建 li
    var li = document.createElement('li');
    // 設(shè)置自定義屬性，記錄小圓圈索引號
    li.setAttribute('index', i);
    // li插入ol
    ol.appendChild(li);
    // 小圈圈排他思想 生成圈圈同時(shí) 直接綁定事件
    li.addEventListener('click', function() {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      this.className = 'current';
      // 點(diǎn)擊小圈圈，移動(dòng)圖片，移動(dòng)的是ul
      // 點(diǎn)擊li，拿到當(dāng)前的索引號
      var index = this.getAttribute('index');
      // 當(dāng)點(diǎn)擊了li之后，就要把index給num，實(shí)現(xiàn)同步
      num = index;
      // 當(dāng)點(diǎn)擊了li之后，就要把index給circle，實(shí)現(xiàn)同步
      circle = index;
      animate(ul, -index * focusWidth, step);
    });
  }
  // ol里第一個(gè)li的類名設(shè)置為current
  ol.children[0].className = 'current';
  var num = 0;
  // circle控制小圓圈的播放
  var circle = 0;
  // 克隆第一章圖片li，放到ul最后面
  // 要在生成小圓圈之后克隆
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  // 點(diǎn)擊右側(cè)按鈕，圖片滾動(dòng)
  arrow_r.addEventListener('click', function() {
    // 如果到了最后一張圖片，ul要快速復(fù)原：left改為0
    if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
    }
    num++;
    animate(ul, -num * focusWidth, step);
    // circle控制小圓圈的播放
    circle++;
    circle = circle == ol.children.length ? 0 : circle;
    circleChange();
  });

  // 點(diǎn)擊左側(cè)按鈕，圖片滾動(dòng)
  arrow_l.addEventListener('click', function() {
    if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * focusWidth + 'px';
    }
    num--;
    animate(ul, -num * focusWidth, step);
    // circle控制小圓圈的播放
    circle--;
    circle = circle < 0 ? (ol.children.length - 1) : circle;
    circleChange();
  });

  // 小圈圈改變樣式
  function circleChange() {
    // 排他其他
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    // 留下自己
    ol.children[circle].className = 'current';
  }

  // 自動(dòng)播放功能
  var timer = setInterval(function() {
    // 手動(dòng)調(diào)用點(diǎn)擊事件
    arrow_r.click();
  }, 2000);
});

animate.js：

function animate(obj, target, time, callback) {
  // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    // 步長值寫到定時(shí)器的里面，并設(shè)置為整數(shù)
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      clearInterval(obj.timer);
      // 回調(diào)函數(shù)寫到定時(shí)器結(jié)束里面
      callback && callback();
    }
    obj.style.left = obj.offsetLeft + step + 'px';
  }, time);
}