課程
/前端開發(fā)
/JavaScript
/焦點圖輪播特效
有誰可以解釋一下為什么前后要多一張圖片嗎?最好通俗點
2017-01-07
源自:焦點圖輪播特效 1-1
正在回答
我試試給你解釋下
假如前后不加一張圖片的話,圖片順序為[1,2,3,4,5],當(dāng)你點到第 5 張圖時,再點“下一張”(就是要回到第 1 張圖那里),這時候,你想象下那個畫面,會一瞬間“刷刷刷”地閃過中間那幾張圖片才能到第 1 張圖那里,這樣,太難看了吧。
為了解決這個問題,所以要在第 5 張那里加多一張 1 圖,圖片順序為 [1,2,3,4,5,1]。當(dāng)你在第 5 張圖點下一張時,圖片滾動順序是這樣的:5 ----> (1) ----> 1,(注:中間的那個 1 是指后面多加的 1 圖),一旦到了那個“多加的 1 圖”,輪播就會瞬間回到 前面的 1 圖那里。
因為都是“1 圖”,所以視覺上不會有那個一次“刷刷刷”閃過好幾張圖片的效果。
同理(點“上一張”),要在 1 圖前加一個 5 圖。
不知道這樣說,你懂不懂。
慕粉3568301 提問者
不是這個意思,真正的原因是,如果沒有多出來的兩張,在1向5或者5向1時就不會有滾動的動畫效果了而是直接跳轉(zhuǎn)的效果,而不是上面說的原因!
舉報
通過本教程學(xué)習(xí)您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答前后分別加載了最后一張圖片和第一張圖片
2 回答不是很理解為什么前后要多放一張?
1 回答不是很理解為什么前后要多放一張?
2 回答原點切換圖片有bug,第一張到最后一張中間有一瞬間的閃白
2 回答為什么點擊下一張的時候第四張圖片不能回到第一張,點擊上一張沒有問題,,,,,
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-01-07
我試試給你解釋下
假如前后不加一張圖片的話,圖片順序為[1,2,3,4,5],當(dāng)你點到第 5 張圖時,再點“下一張”(就是要回到第 1 張圖那里),這時候,你想象下那個畫面,會一瞬間“刷刷刷”地閃過中間那幾張圖片才能到第 1 張圖那里,這樣,太難看了吧。
為了解決這個問題,所以要在第 5 張那里加多一張 1 圖,圖片順序為 [1,2,3,4,5,1]。當(dāng)你在第 5 張圖點下一張時,圖片滾動順序是這樣的:5 ----> (1) ----> 1,(注:中間的那個 1 是指后面多加的 1 圖),一旦到了那個“多加的 1 圖”,輪播就會瞬間回到 前面的 1 圖那里。
因為都是“1 圖”,所以視覺上不會有那個一次“刷刷刷”閃過好幾張圖片的效果。
同理(點“上一張”),要在 1 圖前加一個 5 圖。
不知道這樣說,你懂不懂。
2017-08-13
不是這個意思,真正的原因是,如果沒有多出來的兩張,在1向5或者5向1時就不會有滾動的動畫效果了而是直接跳轉(zhuǎn)的效果,而不是上面說的原因!