Axure教程：使用動態(tài)面板實(shí)現(xiàn)輪播圖

者在本文中介紹了如何用Axure動態(tài)面板實(shí)現(xiàn)輪播圖效果的操作步驟，與大家分享。

所需元件

一個轉(zhuǎn)換為動態(tài)面板的矩形并命名為輪播圖：

這里要記得把“自動調(diào)整為內(nèi)容尺寸”勾選取消掉，方便后面調(diào)整圖片大小。

三張圖片并給圖片編號1、2、3：

三個橢圓并給橢圓對應(yīng)編號1,2,3：

操作步驟

（1）建立三個面板并分別命名為“圖1”、“圖2”、“圖3”

（2）將三張圖分別放到三個面板下

（3）為動態(tài)面板設(shè)置第一個交互動作——載入時，使其自動輪播。

（4）看看效果

到這一步我們已經(jīng)實(shí)現(xiàn)了輪播圖的自動輪播，但是橢圓元件還只是擺設(shè)作用，接下來讓我們?yōu)闄E圓也加入交互。

（5）將三個橢圓放到一個選項(xiàng)組內(nèi)

按住Ctrl鍵并用鼠標(biāo)分別點(diǎn)擊三個橢圓，在“設(shè)置選項(xiàng)組名稱”里填入group。

這里選項(xiàng)組的作用是保證這三個橢圓當(dāng)有一個是選中狀態(tài)時，其他兩個都將是非選中狀態(tài)。

（6）為每個橢圓設(shè)置相應(yīng)的交互動作——鼠標(biāo)單擊時，以及交互樣式——選中

1）橢圓1：

交互動作：

這里需要注意，因?yàn)閳D1在最左邊，所以“進(jìn)入動畫”是“向右滑動”。

交互樣式：

2）橢圓3：

交互動作：

圖3在最右邊，所以“進(jìn)入動畫”是“向左滑動”。

交互樣式：

與橢圓1相同。

3）橢圓2：

交互動作：

因?yàn)闄E圓2處于中間，所以我們需要增加判斷條件：

最終橢圓2的交互動作為：

交互樣式：

與橢圓1相同。

4）動態(tài)面板：

我們再為動態(tài)面板交互動作——載入時，增加一個橢圓1狀態(tài)為選中。

（7）再看看效果：

（8）當(dāng)我們點(diǎn)擊了橢圓時，會發(fā)現(xiàn)輪播圖的自動輪播效果沒了，如果想要實(shí)現(xiàn)點(diǎn)擊橢圓后輪播圖繼續(xù)輪播只需要再在每個橢圓的交互動作后面增加動作：

到這里我們的輪播圖就完成啦！?( ‘ω’ )? get！

小記

（1）這里我們用到了動態(tài)面板的又一種用途——輪播圖。如果想知道動態(tài)面板的另一種用途——密碼可見性切換，可以看我的另一篇文章：http://www.woshipm.com/rp/3126520.html

（2）輪播圖實(shí)現(xiàn)起來不難，但是主要考驗(yàn)我們對于項(xiàng)目中每個元件的命名的嚴(yán)謹(jǐn)準(zhǔn)確，否則很容易就會把橢圓對應(yīng)的圖片弄混，比如點(diǎn)擊第一個橢圓卻跳到了第三張圖…這個項(xiàng)目還只是一個案例，里面的元件非常少，只有十個不到。

然而當(dāng)我們制作一個較大的原型時，項(xiàng)目里面的元件少說也有上百個，當(dāng)你從一開始沒有養(yǎng)成給每個元件命好名的習(xí)慣的話，后面再去梳理將會是一件非常麻煩的事情，也不便于后面查看你的項(xiàng)目的人的查閱。血的教訓(xùn)o(╯□╰)o，所以切記從一開始就為每個添加的元件命好名！

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議

者：夢里夢中夢

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q

吧，用swiper做輪播圖其實(shí)很簡單，特別是官網(wǎng)在使用說明上已經(jīng)講得很清楚了。
但我還是在這里嘮叨幾下。
現(xiàn)有的js庫是很豐富的，其實(shí)我們常用到的組件都有了，輪播圖就是其中之一。
本文就講一下怎么用swiper做輪播圖，因?yàn)樗且粋€很出名的輪播圖組件。
更多文章請關(guān)注我的頭條號，我是落筆承冰。

一、百度一下“swiper”，進(jìn)入它的中文官網(wǎng)。

swiper歷經(jīng)了多個版本，我們就用最新的swiper4來說說吧。

二、調(diào)用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實(shí)現(xiàn)吧。

解壓后，里面有很多文件，找哪個呢？就是這兩個，一個是css，一個是js。

三、我們創(chuàng)建一個空白test.html文件來添加swiper。

引用剛才我們下載的那兩個文件。

四、開始做html部分。

接下來放入輪播的模塊了。

五、大家知道html只是一個外表，js才是內(nèi)核，于是我們加入js部分。

輪播是可以用了，但是真的很很不成看，只有一個很小的范圍可以輪播。

六、我們試著改一下輪播圖的大小，并加個顏色。

我們用谷歌瀏覽器F12進(jìn)入控制臺，模擬手機(jī)界面看一下效果。

七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環(huán)劃動呢，加個loop:true就可以了。

然后我們再改改樣式，讓里面的字變大居中，變白色，再把body的邊距去掉。

八、再加個功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。

九、我們再加個分頁器，分頁器是什么東西，就是輪播下方的一個個小圓點(diǎn)，一點(diǎn)就是一頁，這里我們應(yīng)該有三個點(diǎn)。

十、小圓點(diǎn)是有了，也會隨圖滾動了，可是它不能點(diǎn)擊啊，那好，我們加入這個就可以了點(diǎn)了。

還真的可以點(diǎn)擊了。

十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。

在js里聲明相應(yīng)的對象

十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網(wǎng)查一下，最后，我把圖片放進(jìn)去，做出真正的輪播圖吧。

我搞了三張圖，三張圖寬高大小不一，直接放進(jìn)去了，多少會讓某些圖片少一截或是只看見一部分，這個問題大家自己修改圖片或添加樣式來處理了，我就不再說了。

在線咨詢

上一篇：html基本標(biāo)記-設(shè)置作者信息
下一篇：html多頁面實(shí)現(xiàn)背景音樂的連續(xù)播放，簡單處理筆記

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Axure教程：使用動態(tài)面板實(shí)現(xiàn)輪播圖

所需元件

操作步驟

小記

您的項(xiàng)目需求