一、遇問(wèn)題：

產(chǎn)品說(shuō)：“最近需要弄個(gè)活動(dòng)發(fā)到朋友圈中，我把設(shè)計(jì)圖發(fā)給你”

產(chǎn)品說(shuō)：“有6張?jiān)O(shè)計(jì)圖，我要上下滑動(dòng)翻頁(yè)小程序swiper最后一頁(yè)，都要放在一個(gè)頁(yè)面中啊，還有里面圖片要能動(dòng)！要炫酷！，在加一個(gè)背景音樂(lè)哦”

我（吊炸天小程序swiper最后一頁(yè)，炫酷的，真是折磨人）：“好”

產(chǎn)品：“加油！”

經(jīng)理：“+1”

老板：“+1”

二、解決思路：

1.要炫酷，要花里胡哨，自己寫估計(jì)要耗電時(shí)間，算了，找插件吧

2.滑動(dòng)翻頁(yè)：為了保證用戶體驗(yàn)，不會(huì)再去加載下一頁(yè)，自己放到一個(gè)頁(yè)面，所以每個(gè)頁(yè)面放到一個(gè)DIV中，通過(guò)滑動(dòng)來(lái)顯示指定DIV

2.動(dòng)畫效果:自己使用CSS插件：

三、偽代碼

HTML

 

 

 

 
加載頁(yè)
 
 
 

 
 


 

 
這是第一頁(yè)
 
 
 
 

 
這是第二頁(yè)
 

 

 

 

 
第二頁(yè)中的第1頁(yè)

 
 

 page1
 
 
 

 

 
第二頁(yè)中的第2頁(yè)
 
 

 page2
 

 
 

 

 
第二頁(yè)中的第3頁(yè)
 
 

 page3
 
 
 
 
 

 
 
 

 
 

四、解析

使用到的是插件做滑動(dòng)翻頁(yè)，一般做活動(dòng)廣告宣傳發(fā)到朋友圈，簡(jiǎn)單上手，有炫酷。

五、地址

[演示地址](:3030//上下滑動(dòng)翻頁(yè)面帶背景音樂(lè)/index.html)

[源代碼下載](上下滑動(dòng)翻頁(yè)面帶背景音樂(lè))