一般的輪播都知道是改變圖片父容器的left來實現,那如果是首尾相接的輪播的原理呢?
JS方面該如何回控制呢?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
我說說我的思路吧,希望能給你幫助。我用Jquery的。
首尾相接吧? 之前看過一些相關輪播原理,一般來說第一張切換到第二張用js一點點的移動切換的,那麼當到了最後一張的時候,我們可以在最後一張後面加多一張第一張圖片的拷貝,然後最後一張切換到第一張的分身也是一點點的移動切換,只不過,切換完畢後,立刻直接把改成真的第一張的位置,也就是left:0.這時候後面再繼續又是第一張切換第二張愉快的切換了。 - - 不知道題主是不是問的這個?
提供一個思路吧
可以把輪播組件的每一張圖片都想像為一個獨立的個體,而不是和其他圖片共同連成一行的整體
每次圖片切換的過程,對於用戶來說只能看到2 張圖:當前圖片和下一張圖片,其餘圖片不管真實位置在哪裡,只要用戶看不到就行所以每當需要切換的時候,我們準備好這2 張圖片以及設定他們對應的位移動畫即可,所謂的首尾相接,把『首』放在『尾』的後面然後一定進行動畫就行啦
如果要切換上一張圖也是同理,準備好當前圖片和上一張圖片以及設定他們的位移動畫即可
另外提醒下,行動端的話最好用transform: translate3d(x, 0, 0)來進行位移,這樣能開啟 gpu 加速,否則動畫會卡頓
transform: translate3d(x, 0, 0)
其實很簡單,假設原來有五張圖,結構如下:
<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實現
我說說我的思路吧,希望能給你幫助。我用Jquery的。
.....
取得所有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 加速,否則動畫會卡頓其實很簡單,假設原來有五張圖,結構如下:
你把它變成:
當第一張向左滑動時,動畫結束後重置 left 至 第五張 就可以,反之!
輪播圖 我傾向 動態改變src
題主知道隊列和棧麼,如果知道就很好解釋了,輪播圖就是一個隊列,出隊列元素重新進入隊列
用2組相同圖片,透過transition和修改left來移動。
當left到第二組第一張的時候,直接關閉trantision並left到第一組第一張,然後再開啟transition
原理是:假設向左移動,每次移動之後,將最左一張圖的p挪到最右,也就是將第一個p挪到最後一個,同時修改大容器left的值,加上一個圖的寬度。
用jquery的話可以用insertAfter和insertBefore實現