近期手上一個(gè)手機(jī)站的部分模塊設(shè)計(jì)師設(shè)計(jì)的很有靈性,在傳統(tǒng)輪播切換效果上面還加上了頁碼效果和進(jìn)度條效果。如下圖:
由圖可以看到上面是圖片左右輪播,而且兩邊都留有提示區(qū)域。下面是一條進(jìn)度條,再下面是頁碼。這三個(gè)效果單個(gè)實(shí)現(xiàn)都不難,但是要將這三個(gè)效果整合到一個(gè)輪播效果里面,就需要費(fèi)一番功夫了。
恰巧在網(wǎng)上開源插件中swiper中上訴效果都有,這里也就選擇使用swiper插件來進(jìn)行這個(gè)效果的開發(fā)了。
Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng),是純javascript打造的滑動(dòng)特效插件,面相手機(jī)、平板電腦等移動(dòng)終端,在PC上也有較好的效果。
下面是實(shí)現(xiàn)該效果的部分代碼截圖:Html結(jié)構(gòu):Css代碼:Js代碼:
實(shí)現(xiàn)效果如下:因?yàn)橛许摯a效果,所以這里就不能設(shè)置循環(huán),所以初始狀態(tài)下左邊是沒有提示內(nèi)容的。同時(shí),在進(jìn)度條中有一個(gè)提示模塊,如下:這里我是選擇在原有結(jié)構(gòu)中加上一個(gè)div來實(shí)現(xiàn)該效果的,具體代碼如下:雖然是按照設(shè)計(jì)稿上的尺寸來寫的,但是實(shí)際出來的效果卻是
寬度被縮放了,經(jīng)過排查發(fā)現(xiàn)是插件控制進(jìn)度條進(jìn)度的代碼影響到這里了,這算是一個(gè)bug吧,嘗試用transform來矯正,雖然初始狀態(tài)一致了,但是隨著滾動(dòng),發(fā)現(xiàn)寬度還是會(huì)變化,而且這里用!Important來固定寬度是無效的。目前就這樣了,后面再想辦法改善這個(gè)bug吧。
以上就是關(guān)于網(wǎng)站制作之swiper進(jìn)度條+頁碼組合切換效果(電商網(wǎng)站制作),希望對你有幫助,更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。
文章題目:網(wǎng)站制作之swiper進(jìn)度條+頁碼組合切換效果(電商網(wǎng)站制作)
當(dāng)前URL:http://redsoil1982.com.cn/news8/319658.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、App開發(fā)、、網(wǎng)站設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)