javascript - js裡首尾相接輪播的原理是什麼?
高洛峰
高洛峰 2017-07-05 10:52:07
0
9
1145

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

JS方面該如何回控制呢?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(9)
给我你的怀抱

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


  • 1

  • 2

  • 3

  • 4 li>
    .....

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

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

曾经蜡笔没有小新

提供一個思路吧

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

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

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

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

洪涛

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

<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 至 第五張 就可以,反之!

扔个三星炸死你

輪播圖 我傾向 動態改變src

扔个三星炸死你

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

迷茫

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

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

曾经蜡笔没有小新

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

迷茫

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!