快捷導(dǎo)航

JS+JQuery實現(xiàn)無縫連接輪播圖

更新時間：2020年12月30日 17:42:54 作者：南柯Seven

這篇文章主要介紹了JS+JQuery實現(xiàn)無縫連接輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

我之前寫過一個簡易版的自動+手動輪播圖：簡易輪播圖
但是這個輪播圖在切換的時候是沒有實現(xiàn)無縫滾動的，每張圖片都是單張切換的，而不是滑動?，F(xiàn)在用JQuery實現(xiàn)無縫連接的輪播圖。

無縫連接的輪播圖的原理如下：

代碼：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>無縫輪播圖</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  #container {
    position: relative;
    /*輪播圖容器的寬高*/
    width: 500px;
    height: 260px;
    margin: 20px auto;
    overflow: hidden;
    /*溢出隱藏：只顯示一張圖片*/
  }

  #container .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    /*每張圖片的寬度和輪播圖容器的寬度相等，
    整個圖片層長度：500*5=2500，由于克隆了一張，多加一張寬度*/
    width: 3000px;
    height: 100%;
  }

  #container .wrapper li {
    width: 500px;
    height: 100%;
    float: left;
  }

  #container .wrapper li img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    /*去掉未浮動時圖片間的上下空隙*/
  }

  #container .btnLeft,
  #container .btnRight {
    display: none;
    z-index: 999;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    background-color: #9E9E9E;
    border-radius: 20%;
    opacity: 60%;
    font-size: 20px;
    color: #673ab7;
    text-align: center;
    line-height: 30px;
  }

  #container .btnLeft {
    left: 0;
  }

  #container .btnRight {
    right: 0;
  }

  #container .btnLeft:hover,
  #container .btnRight:hover {
    opacity: 70%;
    cursor: pointer;
  }

  /* 鼠標(biāo)滑過圖片的時候顯示按鈕 */
  #container:hover .btnLeft,
  #container:hover .btnRight {
    display: block;
  }

  /*圓點層*/
  #container .dots {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 999;
    padding: 4px;
    border-radius: 24px;
  }

  #container .dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #9e9e9e;
    float: left;
    /*可以使用行塊盒*/
    /*display: inline-block;*/
    margin: 0 5px;
    cursor: pointer;
  }

  #container .dots li.active {
    background-color: #c74b42;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<body>
  <!-- 實現(xiàn)輪播圖的容器 -->
  <div id="container">
    <!-- 存放全部圖片的容器 -->
    <div class="wrapper">
      <!-- LI: 每張圖片 -->
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      <li><img src="4.jpg"></li>
      <!-- 克隆到末尾 -->
      <li><img src="0.jpg"></li>
    </div>

    <div class="btnLeft">&lt;</div>
    <div class="btnRight">&gt;</div>
    <!-- 分頁器：圓點 -->
    <div class="dots">
      <ul class="clearfix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script src="jquery-1.11.3.min.js"></script>
  <!-- <script src="index.js"></script> -->
  <script type="text/javascript">

    let $container = $('#container'),
      $wrapper = $container.children('.wrapper'),
      $btnLeft = $container.find('.btnLeft'),
      $btnRight = $container.find('.btnRight'),
      $dots = $container.find('.dots'),
      $dotList = $dots.find('li');

    let autoTimer = null,
      interval = 2000,
      imgIndex = 0; //當(dāng)前輪播的圖片索引，默認(rèn)第一張
    // 自動輪播
    function autoPlay() {
      // 讓wrapper向左移動
      imgIndex++;
      /* if(imgIndex === 4) imgIndex = 0; 這樣寫會導(dǎo)致圖片會一下變到第一張，不是無縫滾動
      無縫滾動：
      1. 把第一張克隆一份放到末尾，wrapper中會比真實的圖片層多一張
      2. 依然一張張往后滾動，滾動到第5張的時候，繼續(xù)向后走（imgIndex=6），看到了克隆的第一張，再要向后走的時候，
        讓其“立即”跳轉(zhuǎn)到真實的第一張（肉眼看不出跳轉(zhuǎn)），然后運動到第二張......
      */
      if (imgIndex > 5) {
        // 上次顯示的是克隆的那張，忽略真實的第一張，讓其立即跳轉(zhuǎn)到第二張
        $wrapper.css('left', 0);
        imgIndex = 1;
      }

      // 勻速向左移動
      // 無動畫版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)');
      // 動畫版：
      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自動補'px'
      }, 300);

      showDots();
    }
    autoTimer = setInterval(autoPlay, interval);

    // 圓點對焦
    function showDots() {
      // 由于不能修改imgIndex的值，所以定義一個臨時變量
      let temp = imgIndex;
      temp === 5 ? temp = 0 : null;
      $dotList.each((index, item) => {
        let $item = $(item);
        if (index === temp) {
          $item.addClass('active');
          return;
        }
        $item.removeClass('active');
      });
    }

    // 鼠標(biāo)進(jìn)入/離開輪播區(qū)域時停止/開啟自動輪播
    $container.on('mouseenter', () => {
      clearInterval(autoTimer);
    });

    $container.on('mouseleave', () => {
      autoTimer = setInterval(autoPlay, interval);
    });

    // 點擊圓點
    $dotList.click(function () {
      let index = $(this).index();
      imgIndex = index;

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自動補'px'
      }, 300);

      showDots();
    });

    // 左鍵點擊
    $btnLeft.click(function () {
      imgIndex--;
      if (imgIndex < 0) {
        // 上次顯示的是真實的第一張，忽略克隆的倒數(shù)第一張，讓其立即跳轉(zhuǎn)倒數(shù)第二張
        $wrapper.css('left', -2500);
        imgIndex = 4;
      }

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自動補'px'
      }, 300);

      showDots();
    });

    // 右鍵點擊：相當(dāng)于自動輪播
    $btnRight.click(function() {
      autoPlay();
    });

  </script>

</body>

</html>

這段代碼用單例模式優(yōu)化一下：

html部分：test.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>無縫輪播圖</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  #container {
    position: relative;
    /*輪播圖容器的寬高*/
    width: 500px;
    height: 260px;
    margin: 20px auto;
    overflow: hidden;
    /*溢出隱藏：只顯示一張圖片*/
  }

  #container .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    /*每張圖片的寬度和輪播圖容器的寬度相等，
    整個圖片層長度：500*5=2500，由于克隆了一張，多加一張寬度*/
    width: 3000px;
    height: 100%;
  }

  #container .wrapper li {
    width: 500px;
    height: 100%;
    float: left;
  }

  #container .wrapper li img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    /*去掉未浮動時圖片間的上下空隙*/
  }

  #container .btnLeft,
  #container .btnRight {
    display: none;
    z-index: 999;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    background-color: #9E9E9E;
    border-radius: 20%;
    opacity: 60%;
    font-size: 20px;
    color: #673ab7;
    text-align: center;
    line-height: 30px;
  }

  #container .btnLeft {
    left: 0;
  }

  #container .btnRight {
    right: 0;
  }

  #container .btnLeft:hover,
  #container .btnRight:hover {
    opacity: 70%;
    cursor: pointer;
  }

  /* 鼠標(biāo)滑過圖片的時候顯示按鈕 */
  #container:hover .btnLeft,
  #container:hover .btnRight {
    display: block;
  }

  /*圓點層*/
  #container .dots {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 999;
    padding: 4px;
    border-radius: 24px;
  }

  #container .dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #9e9e9e;
    float: left;
    /*可以使用行塊盒*/
    /*display: inline-block;*/
    margin: 0 5px;
    cursor: pointer;
  }

  #container .dots li.active {
    background-color: #c74b42;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<body>
  <!-- 實現(xiàn)輪播圖的容器 -->
  <div id="container">
    <!-- 存放全部圖片的容器 -->
    <div class="wrapper">
      <!-- LI: 每張圖片 -->
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      <li><img src="4.jpg"></li>
      <!-- 克隆到末尾 -->
      <li><img src="0.jpg"></li>
    </div>

    <div class="btnLeft">&lt;</div>
    <div class="btnRight">&gt;</div>
    <!-- 分頁器：圓點 -->
    <div class="dots">
      <ul class="clearfix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script src="jquery-1.11.3.min.js"></script>
  <script src="index.js"></script>

</body>

</html>

JS部分：index.js

function debounce(func, wait, immediate) {
  let timer = null,
    result = null;
  return function anonymous(...args) {
    let context = this,
      now = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      !immediate ? (result = func.call(context, ...args)) : null;
    }, wait);
    now ? (result = func.call(context, ...args)) : null;
    return result;
  };
}

let bannerModule = (function () {
  let $container = $("#container"),
    $wrapper = $container.children(".wrapper"),
    $btnLeft = $container.find(".btnLeft"),
    $btnRight = $container.find(".btnRight"),
    $dots = $container.find(".dots"),
    $dotList = $dots.find("li");

  let autoTimer = null,
    interval = 2000,
    imgIndex = 0; //當(dāng)前輪播的圖片索引，默認(rèn)第一張
  // 自動輪播
  function autoPlay() {
    // 讓wrapper向左移動
    imgIndex++;
    /* if(imgIndex === 4) imgIndex = 0; 這樣寫會導(dǎo)致圖片會一下變到第一張，不是無縫滾動
        無縫滾動：
        1. 把第一張克隆一份放到末尾，wrapper中會比真實的圖片層多一張
        2. 依然一張張往后滾動，滾動到第5張的時候，繼續(xù)向后走（imgIndex=6），看到了克隆的第一張，再要向后走的時候，
          讓其“立即”跳轉(zhuǎn)到真實的第一張（肉眼看不出跳轉(zhuǎn)），然后運動到第二張......
        */
    if (imgIndex > 5) {
      // 上次顯示的是克隆的那張，忽略真實的第一張，讓其立即跳轉(zhuǎn)到第二張
      $wrapper.css("left", 0);
      imgIndex = 1;
    }

    // 勻速向左移動
    // 無動畫版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)');
    // 動畫版：
    $wrapper.stop().animate({
      left: -imgIndex * 500 //JQ自動補'px'
    }, 300);

    showDots();
  }

  // 圓點對焦
  function showDots() {
    // 由于不能修改imgIndex的值，所以定義一個臨時變量
    let temp = imgIndex;
    temp === 5 ? (temp = 0) : null;
    $dotList.each((index, item) => {
      let $item = $(item);
      if (index === temp) {
        $item.addClass("active");
        return;
      }
      $item.removeClass("active");
    });
  }

  //點擊圓點
  function clickDots() {
    $dotList.click(debounce(function () {
      let index = $(this).index();
      imgIndex = index;

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自動補'px'
      }, 300);

      showDots();
    },300,true));
  }

  // 左右按鍵
  function btnClick() {
    $btnLeft.click(function () {
      imgIndex--;
      if (imgIndex < 0) {
        // 上次顯示的是真實的第一張，忽略克隆的倒數(shù)第一張，讓其立即跳轉(zhuǎn)倒數(shù)第二張
        $wrapper.css('left', -2500);
        imgIndex = 4;
      }

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自動補'px'
      }, 300);

      showDots();
    });

    // 右鍵點擊：相當(dāng)于自動輪播
    $btnRight.click(debounce(autoPlay, 300, true));
  }

  return {
    init: function () {
      autoTimer = setInterval(autoPlay, interval);

      // 鼠標(biāo)進(jìn)入/離開輪播區(qū)域時停止/開啟自動輪播
      $container.on("mouseenter", () => {
        clearInterval(autoTimer);
      });
      $container.on("mouseleave", () => {
        autoTimer = setInterval(autoPlay, interval);
      });

      clickDots();
      btnClick();
    },
  };
})();

bannerModule.init();

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

您可能感興趣的文章: