溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖

發(fā)布時(shí)間：2022-07-08 13:48:30 來(lái)源：億速云 閱讀：203 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要講解了“JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖”吧！

效果

JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖

一、實(shí)現(xiàn)過(guò)程

1）首先實(shí)現(xiàn)基本布局

 <div class="carousel-container">
    //圖片列表
    <div class="carousel-list"></div>
    //上一張
    <div class="carousel-arrow carousel-arrow-left">&lt</div>
    //下一張
    <div class="carousel-arrow carousel-arrow-right">&gt</div>
    //導(dǎo)航點(diǎn)
    <div class="indicator">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
  </div>

2）主要樣式

簡(jiǎn)單布局樣式就不說(shuō)了，主要講如何將圖片橫向排列起來(lái)

先給容器設(shè)置相對(duì)定位，通過(guò)overflow將超出部分隱藏

.carousel-container {
      position: relative;
      width: 500px;
      height: 300px;
      /* overflow: hidden; */
      background-color: #ccc;
 }

然后圖片列表設(shè)置相對(duì)定位和flex盒子，這樣每一個(gè)滑塊就橫向排列成一排了

.carousel-container .carousel-list {
      position: relative;
      display: flex;
      height: 100%;
      width: 100%;
 }

左右滑動(dòng)按鈕通過(guò)絕對(duì)定位+transform的方式移動(dòng)到兩邊，導(dǎo)航點(diǎn)也是一樣，就不一一詳說(shuō)了

二、如何實(shí)現(xiàn)無(wú)縫呢 （重點(diǎn)來(lái)了）

思路：

1、先實(shí)現(xiàn)向后滾動(dòng)無(wú)縫連接，將最后一張復(fù)制一份放到最前面，當(dāng)滾動(dòng)到最后一張時(shí)，再次滾動(dòng)，將要滾動(dòng)到第一張時(shí)，先取消過(guò)渡transition，瞬間跳到最前面復(fù)制的那張上，然后繼續(xù)運(yùn)行動(dòng)畫(huà)到第一張，這樣看起來(lái)就無(wú)縫了

2、向前滾動(dòng)無(wú)縫連接，思路同上，復(fù)制第一張圖片放到最后，當(dāng)滾動(dòng)到第一張，再次滾動(dòng)時(shí)，瞬間跳到最后復(fù)制的那張圖片上，繼續(xù)滾動(dòng)到輪播圖的最后一張上。

JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖

主要代碼

先獲取到dom元素，currentIndex是當(dāng)前輪播到的圖片下標(biāo)

let currentIndex = 0;
const doms = {
      carouselList: document.querySelector('.carousel-list'),
      arrowLeft: document.querySelector('.carousel-arrow-left'),
      arrowRight: document.querySelector('.carousel-arrow-right'),
      indicator: document.querySelectorAll('.indicator span')
    }

先初始化dom，復(fù)制圖片

// 復(fù)制第一張放最后，最后一張圖片放第一張之前
    function init() {
      let lastImg = doms.carouselList.lastElementChild.cloneNode(true)
      let firstImg = doms.carouselList.firstElementChild.cloneNode(true)

      doms.carouselList.appendChild(firstImg)
      doms.carouselList.insertBefore(lastImg, doms.carouselList.firstElementChild)
      lastImg.style.position = 'absolute'
      lastImg.style.transform = 'translateX(-100%)'
    }
    //執(zhí)行一下
    init()

實(shí)現(xiàn)到任意一張圖片的方法

function moveTo(index) {
      doms.carouselList.style.transform = `translateX(-${index * 100}%)`
      doms.carouselList.style.transition = '.5s'

      // 去掉導(dǎo)航點(diǎn)選中效果
      let active = document.querySelector('.indicator span.active')
      active.classList.remove('active')
      // 添加選中效果
      doms.indicator[index].classList.add('active')
      currentIndex = index
    }

給導(dǎo)航點(diǎn)綁定點(diǎn)擊跳轉(zhuǎn)事件

// 給導(dǎo)航點(diǎn)添加事件
    doms.indicator.forEach((item, i) => {
      item.onclick = function () {
        moveTo(i);
      }
    })

給前后按鈕綁上執(zhí)行事件,判斷邊界圖片，及時(shí)取消過(guò)渡效果，瞬間跳到復(fù)制的圖片位置，調(diào)用moveTo到第一張或最后一張圖片上。

let indicatorLength = doms.indicator.length;
    function preSlide() {
      if (currentIndex === 0) {
        doms.carouselList.style.transition = 'none'
        doms.carouselList.style.transform = `translateX(-${indicatorLength * 100}%)`
        doms.carouselList.clientHeight
        moveTo(indicatorLength - 1)
      } else {
        moveTo(currentIndex - 1)
      }
    }
    function nextSlide() {
      if (currentIndex === doms.indicator.length - 1) {
        doms.carouselList.style.transition = 'none'
        doms.carouselList.style.transform = 'translateX(100%)'
        doms.carouselList.clientHeight
        moveTo(0)
      } else {
        moveTo(currentIndex + 1)
      }
    }

    doms.arrowLeft.onclick = function () {
      preSlide();
    }

    doms.arrowRight.onclick = function () {
      nextSlide()
    }

最后使用定時(shí)器調(diào)用nertSlide方法就實(shí)現(xiàn)自動(dòng)播放了

function start(time = 2000) {
      setInterval(() => {
        nextSlide()
      }, time)
    }
    start()

完整代碼

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .carousel-container {
      margin: 0 auto;
      position: relative;
      width: 500px;
      height: 300px;
      /* overflow: hidden; */
      background-color: #ccc;
    }

    .carousel-container .carousel-list {
      position: relative;
      display: flex;
      height: 100%;
      width: 100%;
    }

    .carousel-container .carousel-list .slide {
      flex: 0 0 100%;
      height: 100%;
      width: 100%;
    }

    .slide a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }

    .slide a img {
      width: 100%;
    }

    .carousel-container .carousel-arrow {
      display: none;
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: white;
      text-align: center;
      line-height: 36px;
      cursor: pointer;

      background-color: rgba(31, 45, 61, .2);
    }

    .carousel-container:hover .carousel-arrow {
      display: block;
    }

    .carousel-container:hover .carousel-arrow:hover {
      background-color: rgba(31, 45, 61, .4);
    }

    .carousel-container .carousel-arrow-left {
      top: 50%;
      left: 2%;
      transform: translateY(-50%);
    }

    .carousel-container .carousel-arrow-right {
      top: 50%;
      right: 2%;
      transform: translateY(-50%);
    }

    .carousel-container .indicator {
      display: flex;
      position: absolute;
      left: 50%;
      top: 90%;
      transform: translateX(-50%)
    }

    .carousel-container .indicator span {
      margin: 2px 5px;
      padding: 3px;
      width: 5px;
      height: 5px;
      border: 1px solid white;
      border-radius: 5px;
    }

    .active {
      background-color: #fff;
    }
  </style>
</head>


<body>
  <div class="carousel-container">
    <div class="carousel-list">
      <div class="slide">
        <a href="">
          <img
            src="https://ts4.cn.mm.bing.net/th?id=OIP-C.kB-Ovasi0GW67-rmwnAcwAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2">
        </a>
      </div>
      <div class="slide">
        <a href="">
          <img
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"></a>
      </div>
      <div class="slide">
        <a href="">
          <img
            src="https://ts2.cn.mm.bing.net/th?id=OIP-C.P3NSGTdAYdyqy5zJpb5QXQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
            alt=""></a>
      </div>
    </div>
    <div class="carousel-arrow carousel-arrow-left">&lt</div>
    <div class="carousel-arrow carousel-arrow-right">&gt</div>
    <div class="indicator">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>

<script>
  window.onload = function () {
    const doms = {
      carouselList: document.querySelector('.carousel-list'),
      arrowLeft: document.querySelector('.carousel-arrow-left'),
      arrowRight: document.querySelector('.carousel-arrow-right'),
      indicator: document.querySelectorAll('.indicator span')
    }
    let currentIndex = 0;

    function moveTo(index) {
      doms.carouselList.style.transform = `translateX(-${index * 100}%)`
      doms.carouselList.style.transition = '.5s'

      // 去掉導(dǎo)航點(diǎn)選中效果
      let active = document.querySelector('.indicator span.active')
      active.classList.remove('active')
      // 添加選中效果
      doms.indicator[index].classList.add('active')
      currentIndex = index
    }

    // 給導(dǎo)航點(diǎn)添加事件
    doms.indicator.forEach((item, i) => {
      item.onclick = function () {
        moveTo(i);
      }
    })
    // 復(fù)制第一張放最后，最后一張圖片放第一張之前
    function init() {
      let lastImg = doms.carouselList.lastElementChild.cloneNode(true)
      let firstImg = doms.carouselList.firstElementChild.cloneNode(true)

      doms.carouselList.appendChild(firstImg)
      doms.carouselList.insertBefore(lastImg, doms.carouselList.firstElementChild)
      lastImg.style.position = 'absolute'
      lastImg.style.transform = 'translateX(-100%)'
    }

    let indicatorLength = doms.indicator.length;
    function preSlide() {
      if (currentIndex === 0) {
        doms.carouselList.style.transition = 'none'
        doms.carouselList.style.transform = `translateX(-${indicatorLength * 100}%)`
        doms.carouselList.clientHeight
        moveTo(indicatorLength - 1)
      } else {
        moveTo(currentIndex - 1)
      }
    }
    function nextSlide() {
      if (currentIndex === doms.indicator.length - 1) {
        doms.carouselList.style.transition = 'none'
        doms.carouselList.style.transform = 'translateX(100%)'
        doms.carouselList.clientHeight
        moveTo(0)
      } else {
        moveTo(currentIndex + 1)
      }
    }

    doms.arrowLeft.onclick = function () {
      preSlide();
    }

    doms.arrowRight.onclick = function () {
      nextSlide()
    }

    function start(time = 2000) {
      setInterval(() => {
        nextSlide()
      }, time)
    }
    start()
    init()

  }
</script>

</html>

感謝各位的閱讀，以上就是“JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript如何實(shí)現(xiàn)無(wú)縫輪播圖這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手