84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
一般的輪播都知道是改變圖片父容器的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實現