JavaScript實(shí)現(xiàn)無縫輪播效果的思路

來源 | http://www.fly63.com/article/detial/7326?type=1

先從普通輪播說起（自動播放功能后面實(shí)現(xiàn)）

  
        
                                                  
  
  
        1        2        3  

最簡單的點(diǎn)擊按鈕切換圖片很簡單。

給按鈕添加click事件監(jiān)聽，改變圖片的translateX。當(dāng)然如果想要輪播圖從上到下播放，相應(yīng)的改變translateY就行。

let $buttons = $('#buttons>span')let $slides = $('#slides')$buttons.eq(0).on('click',function(){      $slides.css({transform:'translateX(0px)'})})$buttons.eq(1).on('click',function(){      $slides.css({transform:'translateX(-250px)'})})$buttons.eq(2).on('click',function(){      $slides.css({transform:'translateX(-500px)'})})

這個方案從最后一張到第一張時(shí)，或者從第一張到最后一張時(shí)，一定會經(jīng)過中間的圖片，無法做到無縫輪播。

我們使用討巧的辦法，在第一張前面隱藏最后一張圖片的復(fù)制，最后一張后面隱藏第一張的復(fù)制，這樣在最后一張時(shí)點(diǎn)擊下一張就能到第一張，但這個時(shí)候需要把假冒的第一張貍貓換太子，變成真的第一張不然就穿幫了。

let $firstCopy = $images.eq(0).clone(true) //clone()可選布爾值。規(guī)定是否復(fù)制元素的所有事件處理。let $lastCopy = $images.eq(2).clone(true)$slides.append($firstCopy)$slides.prepend($lastCopy)

既然增加了兩張圖片，相應(yīng)的位置也要做一些調(diào)整。把復(fù)制的最后一張圖片隱藏掉

$slides.css({transform:'translateX(-250px)'})

接下開就是位置檢測，給三張圖片添加標(biāo)記

let current = 0$buttons.eq(0).on('click',function(){      $slides.css({transform:'translateX(-250px)'})      current = 0})$buttons.eq(1).on('click',function(){      $slides.css({transform:'translateX(-500px)'})      current = 1})$buttons.eq(2).on('click',function(){      $slides.css({transform:'translateX(-750px)'})      current = 2})

當(dāng)current值為2（第三張）同時(shí)按鈕1被點(diǎn)擊時(shí)，為了達(dá)到無縫效果，需要播放下一頁，露出copy的第一張。

$buttons.eq(0).on('click',function(){      if(current === 2){            $slides.css({transform:'translateX(-1000px)'})     }else{            $slides.css({transform:'translateX(-250px)'})           current = 0  }})

現(xiàn)在把copy的第一張變成真正的第一張。

$buttons.eq(0).on('click',function(){      if(current === 2){            $slides.css({transform:'translateX(-1000px)'})            .one('transitionend',function(){              $slides.addClass('hide')              $slides.css({transform:'translateX(-250px)'})              .offset()              $slides.remooveClass('hide')              current = 0    })}else{            $slides.css({transform:'translateX(-250px)'})            current = 0  }})

先將輪播隱藏，然后偷偷地?fù)Q掉圖片，offset()會計(jì)算元素偏移的位置，隱藏掉圖片更換的過程。

本文完?