javascript - js裡首尾相接輪播的原理是什麼？

Question

一般的輪播都知道是改變圖片父容器的left來實現，那如果是首尾相接的輪播的原理呢？

JS方面該如何回控制呢？

Answer 1

我說說我的思路吧，希望能給你幫助。我用Jquery的。

• 1


• 2


• 3


• 4
  .....
  
  
  取得所有li標籤$("li")。點擊左或右移動鈕，ul就左右移動XX像素（每個li大小一樣，移動一個li的width）
  向左就把第一個$("li").eq[0]，放到ul的最後（appendTo）；右移就把最後li放到最前面（prependTO）。
  加點動畫效果animate（）好看一點。

Answer 2

首尾相接吧？ 之前看過一些相關輪播原理，一般來說第一張切換到第二張用js一點點的移動切換的，那麼當到了最後一張的時候，我們可以在最後一張後面加多一張第一張圖片的拷貝，然後最後一張切換到第一張的分身也是一點點的移動切換，只不過，切換完畢後，立刻直接把改成真的第一張的位置，也就是left:0.這時候後面再繼續又是第一張切換第二張愉快的切換了。 - - 不知道題主是不是問的這個？

Answer 3

提供一個思路吧

可以把輪播組件的每一張圖片都想像為一個獨立的個體，而不是和其他圖片共同連成一行的整體

每次圖片切換的過程，對於用戶來說只能看到2 張圖：當前圖片和下一張圖片，其餘圖片不管真實位置在哪裡，只要用戶看不到就行
所以每當需要切換的時候，我們準備好這2 張圖片以及設定他們對應的位移動畫即可，所謂的首尾相接，把『首』放在『尾』的後面然後一定進行動畫就行啦

如果要切換上一張圖也是同理，準備好當前圖片和上一張圖片以及設定他們的位移動畫即可

另外提醒下，行動端的話最好用transform: translate3d(x, 0, 0)來進行位移，這樣能開啟 gpu 加速，否則動畫會卡頓

Answer 4

其實很簡單，假設原來有五張圖，結構如下：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
<ul>

你把它變成：

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
<ul>

當第一張向左滑動時，動畫結束後重置 left 至 第五張 就可以，反之！

Answer 5

輪播圖 我傾向 動態改變src

Answer 6

題主知道隊列和棧麼，如果知道就很好解釋了，輪播圖就是一個隊列，出隊列元素重新進入隊列

Answer 7

用2組相同圖片，透過transition和修改left來移動。

當left到第二組第一張的時候，直接關閉trantision並left到第一組第一張，然後再開啟transition

Answer 8

原理是：假設向左移動，每次移動之後，將最左一張圖的p挪到最右，也就是將第一個p挪到最後一個，同時修改大容器left的值，加上一個圖的寬度。

Answer 9

用jquery的話可以用insertAfter和insertBefore實現