【背景介紹】
電商平臺(tái)商品詳情頁(yè)大同小異，有一個(gè)模塊是肯定少不了的，就是產(chǎn)品圖展示區(qū)域，下面主要就展示圖區(qū)的一些小效果做一些說(shuō)明。
【準(zhǔn)備工作】
網(wǎng)上找一些圖片素材，要分兩批，一批大圖，一批小圖（不想自己找的，文末有素材附件）
【功能實(shí)現(xiàn)】
1、首先拖入一個(gè)動(dòng)態(tài)面板，命名為d，大小為387x121，將小圖按照順序排列好，根據(jù)美觀度自主調(diào)節(jié)圖片間距如下圖：
list
2、點(diǎn)進(jìn)去d的狀態(tài)1，將小圖全部選中轉(zhuǎn)換為動(dòng)態(tài)面板，命名為d1，d1展示全部的5張小圖，而d則展示4張小圖，如下圖：
list
3、在d1中拖入一個(gè)矩形框，外框設(shè)置為紅色，顏色設(shè)為透明，如下圖：
4、將大圖放置在小圖的上方，并轉(zhuǎn)換為動(dòng)態(tài)面板，命名為d_big，如下圖：
5、給五張小圖分別命名：small_1、small_2、small_3、small_4、small_5，設(shè)置鼠標(biāo)移入移出事件，當(dāng)鼠標(biāo)移入時(shí)，設(shè)置紅色外框（命名為wk_red），移動(dòng)到小圖的坐標(biāo)位置（x,y），這里用到函數(shù)[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1代表的是元件小圖，同時(shí)設(shè)置大圖根據(jù)小圖進(jìn)行狀態(tài)切換，效果如下圖：
6、在小圖兩邊畫上左右箭頭，點(diǎn)擊左箭頭，讓d1向左移動(dòng)一定距離，點(diǎn)擊右箭頭，讓d1向右移動(dòng)一定距離，向左距離為負(fù)值，向右移動(dòng)為正值。具體參考下圖：
7、最終效果如下圖：
【素材】
素材下載
【rp文件】
rp文件
