-
加入我們
-
VIP定制
-
求關(guān)注
Thank you for visiting
029-81773686
全網(wǎng)開發(fā)&整合營銷服務(wù)商
CopyRight
?HOOBOO All rights reserved
2015.11.14
西安網(wǎng)站設(shè)計的小編最近老是在找一般常用的banner圖特效,需要都會來找到我這里找,要求換一個兼容性比較好的插件,今天整理一下最近常用的大圖效果:
上面是js要調(diào)用的,大家沒事可以下載下來;
上面的是真正在php里面的代碼,當(dāng)然你要循環(huán)出來吧!
#full-screen-slider { width:100%; height:570px; float:left; position:relative;background:#f1f1f1; }
#slides { display:block; width:100%; height:570px; list-style:none; padding:0; margin:0; position:relative}
#slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;z-index:10;}
#slides li a { display:block; width:100%; height:100%; text-indent:-9999px}
上面這些代碼常要該的就是高度height:****
#pagination { display:block; list-style:none; position:absolute; left:19.3%; top:527px; z-index:1000000000; padding:5px 15px 5px 0; margin:0}
這個也是要改的小點點距離頂端的距離,一般只要不太過都是會居中的。
#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;width:10px; height:10px;}
#pagination li.current { background:#0092CE}*/
#pagination li { display:block; list-style:none; width:11px; height:11px; float:left; margin-left:15px; background:url(../images/pagination.png) no-repeat}
#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;width:7px; height:7px;}
#pagination li.current { background:url(../images/pagination2.png) no-repeat}
上面最長該的就是寬度大小及背景圖片,還好我做成了圖片,如果用css固定背景色塊,圓形就會顯示成正方形的。
CopyRight ? 西安宏博網(wǎng)絡(luò)科技有限公司 備案號:陜ICP備10007014號-8 站點地圖 免責(zé)聲明:本網(wǎng)站部分資源來源于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系我們告知刪除,我們將會盡快處理,謝謝!本站不承擔(dān)任何法律責(zé)任。