JS輪播圖的實現(xiàn)方法

更新時間：2020年08月24日 15:27:16 作者：hthththtt

這篇文章主要為大家詳細介紹了JS輪播圖的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS輪播圖的實現(xiàn)代碼，供大家參考，具體內容如下

需求：

自動輪播，鼠標移入輪播停止、移出繼續(xù)，小圓點點擊切圖，左右箭頭切圖

效果圖：

思路

通過編寫過渡動畫實現(xiàn)輪播效果，圖片的出現(xiàn)動畫以及移出動畫。顯示區(qū)的圖片移出，切換的圖進入分別調用動畫，程序關鍵點：哪張圖應該進入，哪張圖應該移出。

輪播分為三部分：

自動輪播，左右箭頭翻圖，底部小圓點點擊翻圖。

編寫程序順序：

1. 小圓點點擊

為什么先做小圓點呢？做小圓點點擊功能時，我們能夠清晰的知道哪張圖片應該切換過來，哪張圖片應該移開。例如，顯示區(qū)是第一張圖時，點擊第二個原點，那么當前的第一張圖應該移開，第二圖應該進入。

2.左右箭頭切換

這部分功能，我們可以這種思路，當點擊左箭頭時，相當于我們按順序點擊1、2、3號小圓點，只是顯示區(qū)為3號圖時，我們需要將下一張設置為1號圖。所以加一個判斷條件即可，當計數(shù)器為3時，重置為1；右邊箭頭相反即可順序變?yōu)?、2、1，當當計數(shù)器為1時，重置為3。

3.自動輪播

這功能就相當于在一定的時間間隔內，點擊右邊箭頭或者左邊箭頭。

HTML部分：

<div id="banner">
 <div class="w">
  <!--   左右箭頭-->
  <span class="iconfont icon-zuojiantou" onclick="arrow_left()"></span>
  <span class="iconfont icon-youjiantou" onclick="arrow_right()"></span>
  <!--   輪播圖-->
  <ul>
   <li><img src="img/1.jpg" alt=""></li>
   <li style="left: 1000px"><img src="img/2.jpg" alt="" ></li>
   <li style="left: 1000px"><img src="img/3.jpg" alt="" ></li>
  </ul>
  <!--  /小圓點-->
  <ol id="circleContainer">
   <li onclick="move(0)"></li>
   <li onclick="move(1)"></li>
   <li onclick="move(2)"></li>
  </ol>
 </div>
</div>

CSS部分：

<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  .w {
   width: 1000px;
   height: 600px;
   margin: 100px auto 0;
   position: relative;
   overflow: hidden;
  }
  ul {
   height: 600px;
  }
  @keyframes leftCome {
   from {
    left: -100%;
   }
   to {
    left: 0;
   }
  }
  @keyframes leftOut {
   from {
    left: 0;
   }
   to {
    left: 100%;
   }
  }
  @keyframes rightCome {
   from {
    left: 100%;
   }
   to {
    left: 0;
   }
  }
  @keyframes rightOut {
   from {
    left: 0;
   }
   to {
    left: -100%;
   }
  }
  ul li {
   position: absolute;
   width: 1000px;
  }
  ul li img {
   width: 100%;
   height: 600px;
  }
  .iconfont {
   color: white;
   position: absolute;
   font-size: 30px;
   top: calc(50% - 15px);
   background-color: rgba(216, 216, 216, 0.23);
   cursor: pointer;
   opacity: 0;
   transition: opacity .3s linear;
   z-index: 999;
  }
  .iconfont:hover {
   color: palegreen;
  }
  .icon-zuojiantou {
   left: 0;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
  }
  .icon-youjiantou {
   right: 0;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
  }
  #circleContainer {
   position: absolute;
   bottom: 10px;
   left: calc(50% - 30px);
  }
  #circleContainer li {
   display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: white;
   margin-right: 5px;
  }
  #circleContainer .change {
   background-color: palegreen;
   box-shadow: 0 0 10px #7dd07d;
  }
</style>

JS部分：

<script>
  let timer ;
  window.onload = function(){
   timer = setInterval(function () {
    arrow_left();
   },3000)
  };
  let arrow = document.querySelectorAll(".iconfont");
  let w = document.querySelector(".w");
  let circle = document.querySelectorAll("ol li");
  w.addEventListener("mouseenter",function () {
   clearInterval(timer);
   arrow[0].style.opacity = "1";
   arrow[1].style.opacity = "1";
  });
  w.addEventListener("mouseleave",function () {
   arrow[0].style.opacity = "0";
   arrow[1].style.opacity = "0";
   timer = setInterval(function () {
    arrow_left();
   },3000)
  });
  circle[0].className = "change";
  let location_i = 0;
  let li = document.querySelectorAll("ul li");
  // 移動函數(shù)
  function move(i,direcTion_) {
    if (direcTion_ === "right") {
     if (location_i !== i) {
      li[i].style.animation = "rightCome .5s ease forwards";
      li[location_i].style.animation = "rightOut .5s ease forwards";
      location_i = i;
      num = i;
     }
    } else {
     if (location_i !== i) {
      li[i].style.animation = "leftCome .5s ease forwards";
      li[location_i].style.animation = "leftOut .5s ease forwards";
      location_i = i;
      num = i;
     }
    }
    for (let i = 0 ; i<circle.length ;i++){
     circle[i].className = "";
    }
    circle[location_i].className = "change";
  }
  // 右箭頭
  let flag = true;
  let num = 0;
  function arrow_right() {
   flag = false ;
   num === 2 ? num = 0 : num = location_i + 1;
   move(num);
  }
  // 左箭頭
  function arrow_left() {
   num === 0 ? num = 2 : num = location_i - 1;
   move(num,"right");
  }
</script>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: