輪播banner的略簡便實(shí)現(xiàn)方式

15 評論 16024 瀏覽 70 收藏 5 分鐘

前面發(fā)了一篇輪播banner的實(shí)現(xiàn)（http://www.aharts.cn/rp/175508.html），實(shí)現(xiàn)方法上稍微步驟多了點(diǎn)，另外有童鞋問能不能手動(dòng)和自動(dòng)結(jié)合設(shè)置，這里就介紹一個(gè)簡便的實(shí)現(xiàn)方法。

輪播banner簡單法：

1. 添加一個(gè)動(dòng)態(tài)面板（自命名“首頁banner”），添加3個(gè)狀態(tài)，分別給每個(gè)狀態(tài)添加一個(gè)banner

2. 將動(dòng)態(tài)面板設(shè)為隱藏，初始觸發(fā)條件，頁面交互的頁面加載時(shí)添加用例“顯示”動(dòng)態(tài)面板

以上步驟和前一篇文章的前期準(zhǔn)備工作相同，接下來就是不一樣的，看好咯～～～～～～

3. 給動(dòng)態(tài)面板添加交互效果，在“顯示”下添加用例，設(shè)置等待2000毫秒，設(shè)置面板狀態(tài)，選擇狀態(tài)為下一步，選中“向后循環(huán)”（從最后一個(gè)到第一個(gè)自動(dòng)跳轉(zhuǎn)），選中“循環(huán)間隔”設(shè)置時(shí)間為2000毫秒，然后設(shè)置進(jìn)入退出動(dòng)畫，均為”向左滑動(dòng)“。該動(dòng)態(tài)面板設(shè)為隱藏。

2

這些設(shè)置好了，預(yù)覽下就看到banner的輪播效果咯～～～～～～～～～～

 

下面介紹鼠標(biāo)滑動(dòng)到banner上時(shí)，banner停止輪播，點(diǎn)擊左右按鈕，banner左右切換，當(dāng)鼠標(biāo)移出banner時(shí)，輪播效果繼續(xù)。

  1. 再添加一個(gè)動(dòng)態(tài)面板（自命名“左右箭頭”)，大小和banner相同，面板里添加左右按鈕
  2. 左右按鈕分別設(shè)置點(diǎn)擊交互效果，“鼠標(biāo)點(diǎn)擊時(shí)“下添加用例，設(shè)置面板狀態(tài)，向左的按鈕選擇面板狀態(tài)”上一步“（previous）進(jìn)入退出動(dòng)畫為“向右滑動(dòng)”，向右的按鈕選擇面板狀態(tài)“下一步”（next），進(jìn)入退出動(dòng)畫為“向左滑動(dòng)”，都要選中各自下方循環(huán)狀態(tài)。

3

4

4. 給banner的面板添加新的用例，在”鼠標(biāo)移入時(shí)“下添加用例，顯示左右按鈕動(dòng)態(tài)面板

6

5. 再給左右按鈕面板添加用例，在“鼠標(biāo)移出時(shí)”添加用例，隱藏左右按鈕動(dòng)態(tài)面板，且為了再次觸發(fā)banner輪播，添加隱藏banner面板和顯示面板

5

這些都設(shè)置好了之后，你是不是覺得已經(jīng)可以了呢？可以預(yù)覽下。。。。。結(jié)果是？？？？當(dāng)然還是不可以??_??還有最后一步，很重要的最后一步，很重要的最后一步，很重要的最后一步，嘻嘻，重要的話得說3遍才行～

6. 最后一步，給banner面板的“顯示”添加條件，設(shè)置部件的可見性，選中this為左右按鈕面板，值?。絫rue（或者值＝false）

7

ok啦～～～～～～～

 

本文由 @Lprecious 原創(chuàng)投稿，并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可，禁止轉(zhuǎn)載。

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Lprecious
尋根究底的強(qiáng)迫癥患者
15篇作品 417257總閱讀量
02-237176 瀏覽
為什么「華與華方法」在我們公司不管用？
06-0812396 瀏覽
AI 時(shí)代，產(chǎn)品能力大圖（收藏版）
07-1913119 瀏覽
寫給小白：什么是業(yè)務(wù)中臺與數(shù)據(jù)中臺？
03-222446 瀏覽
游戲化實(shí)戰(zhàn)（四）：教育-讓「激娃」成為過去式
12-114496 瀏覽
餐飲企業(yè)數(shù)字化應(yīng)用現(xiàn)狀、趨勢及系統(tǒng)軟件工具
評論
評論請登錄

  1. 請問一下這種簡略版怎么選中圓點(diǎn)呢？

    來自北京 回復(fù)

  2. ??

    來自福建 回復(fù)

  3. 你真的實(shí)現(xiàn)了鼠標(biāo)移入停止播放嗎？

    來自江蘇 回復(fù)

  4. 第5步里面設(shè)置了隱藏又顯示banner面板，不是很懂，是不是跟最后一步設(shè)置狀態(tài)也有關(guān)?？梢詭兔忉屜聠?。
    另，我是省掉了第5步和最后一步，效果好像也ok，暫時(shí)沒看到出問題。

    來自上海 回復(fù)

  5. 感謝分享，對于那些SB可以無視就好。

    來自北京 回復(fù)

  6. 看不懂就看不懂，干嘛罵人呢，分享制作過程還被噴 ??

    來自上海 回復(fù)

    1. ?? 我錯(cuò)了

      來自上海 回復(fù)

    2. ?? 接受道歉

      來自上海 回復(fù)

  7. 個(gè)人建議，拋個(gè)磚：
    1.在banner輪播的基礎(chǔ)上，直接添加左右箭頭，設(shè)置為隱藏；
    2.針對banner添加用例
    1）鼠標(biāo)移入banner時(shí)，設(shè)置banner的面板狀態(tài)為“停止循環(huán)”，同時(shí)顯示“左右箭頭”；
    2）鼠標(biāo)移出banner時(shí)，隱藏和顯示banner；
    3.針對左右箭頭分別添加用例，同原文。

    歡迎討論 ??

    來自江蘇 回復(fù)

    1. 一個(gè)效果多種實(shí)現(xiàn)方式，只要都能實(shí)現(xiàn)就是ok的。
      原型演示正確的效果就好，最后都是代碼實(shí)現(xiàn)

      來自上海 回復(fù)

    2. 謝謝，感謝更清晰易懂。。。

      來自廣東 回復(fù)

  8. “鼠標(biāo)滑動(dòng)到banner上時(shí)，banner停止輪播”
    這個(gè)交互不太對，按文中的設(shè)置，鼠標(biāo)移入后顯示“左右箭頭”動(dòng)態(tài)面板，但實(shí)際操作中的需求應(yīng)該是“鼠標(biāo)移入后，banner停留在當(dāng)前圖片狀態(tài)，移出后恢復(fù)輪播”

    來自江蘇 回復(fù)

    1. 在作者的這個(gè)輪播下，有實(shí)現(xiàn)方法嗎

      來自上海 回復(fù)

  9. ??

    來自上海 回復(fù)

  10. 做這個(gè)是完全沒有必要的

    來自浙江 回復(fù)