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

更新時(shí)間：2020年11月19日 15:25:55 作者：御劍把酒聽秋雨丶

這篇文章主要介為大家詳細(xì)紹了JavaScript實(shí)現(xiàn)無限輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)無限輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

效果展示

原理

圖片說明原理

輪播順序：1–>2–>3–>4–>5–>1的副本–>2–>3–>4–>5–>1的副本–>2…一直循環(huán)

鼠標(biāo)進(jìn)入圖片時(shí)自動(dòng)輪播暫停，離開后恢復(fù)

資源下載

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>無限輪播</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      vertical-align: top;
    }
    #slider {
      width: 520px;
      height: 280px;
      border: 1px solid #000;
      padding: 10px;
      margin: 100px auto;
      position: relative;

    }
    #top {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    #top ul {
      width: 3120px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    #top ul li {
      width: 520px;
      height: 280px;
      float: left;
    }
    #slider ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    #slider ol li {
      width: 20px;
      height: 20px;
      background-color: darkgrey;
      display: inline-block;
      border-radius: 50%;
      margin-right: 3px;
      cursor: pointer;
    }
    #slider ol li.current {
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div id="slider">
    <div id="top">
      <ul id="ul">
        <li><img src="images/pic01.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic03.jpg" alt=""></li>
        <li><img src="images/pic04.jpg" alt=""></li>
        <li><img src="images/pic05.jpg" alt=""></li>
      </ul>
    </div>
    <ol id="ol">
    </ol>
  </div>
<script src="js/myFunc.js"></script>
<script>
  window.onload = function () {
    // 1.獲取需要的標(biāo)簽
    var lis = $("ul").children;

    // 6.自動(dòng)輪播參數(shù)定義（圖片索引，圓點(diǎn)索引）
    var currentIndex = 0, indicatorIndex = 0;

    // 2.克隆li標(biāo)簽(將第一個(gè)li標(biāo)簽克隆一份到最后一個(gè)li標(biāo)簽后面)
    $("ul").appendChild(lis[0].cloneNode(true));

    // 3.動(dòng)態(tài)創(chuàng)建右下角的圓點(diǎn)
    for(var i=0; i<lis.length-1; i++){ // 因?yàn)榭寺×艘粋€(gè)li，所以需要減1
      var li = document.createElement("li");
      $("ol").appendChild(li);
    }

    // 4.第一個(gè)圓點(diǎn)選中
    $("ol").children[0].className = "current";

    // 5.監(jiān)聽鼠標(biāo)進(jìn)入圓點(diǎn)
    var olLis = $("ol").children;
    for(var j=0; j<olLis.length; j++){
      (function (j) { // 閉包
        // 5.1 獲取單獨(dú)的li標(biāo)簽
        var li = olLis[j];

        // 5.2 鼠標(biāo)進(jìn)入
        li.onmouseover = function () {
          for(var i=0; i<olLis.length; i++){ // 排他思想
            olLis[i].className = "";
          }

          this.className = "current";

          // 5.3 輪播圖動(dòng)起來
          constant($("ul"), -(520 * j), 60);

          // 6.1
          currentIndex = indicatorIndex = j;
        }
      })(j)
    }

    // 7.自動(dòng)輪播
    var timer = setInterval(autoPlay, 1000);

    // 8.清除和設(shè)置定時(shí)器
    $("slider").onmouseover = function () {
      clearInterval(timer);
    };

    $("slider").onmouseout = function () {
      timer = setInterval(autoPlay, 1000);
    };

    /**
     * 自動(dòng)輪播函數(shù)
     */
    function autoPlay() {
      // 7.1 ul 滾動(dòng)起來
      currentIndex++;
      if(currentIndex > lis.length-1){
        $("ul").style.left = 0;
        currentIndex = 1;
      }
      constant($("ul"), -currentIndex * 520, 60);

      // 7.2 圓點(diǎn)滾動(dòng)起來
      indicatorIndex++;
      if(indicatorIndex > olLis.length-1){
        indicatorIndex = 0;
      }
      for(var i=0; i<olLis.length; i++){ // 排他思想
        olLis[i].className = "";
      }

      olLis[indicatorIndex].className = "current";
    }
  }
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: