本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看
CSS Code
- <style type="text/css">
- *{ margin:0;padding:0;list-style-type:none;}
- a,img{ border:0;}
- /* ui-banner */
- .ui-banner{ display:block;position:relative;width:820px;margin:20px auto;}
- .ui-banner.ui-banner-invalid{ display:none;}
- .ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{ height:233px;}
- .ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{ position:absolute;top:0;}
- .ui-banner ul{ list-style-type:none;margin:0;padding:0;overflow:hidden;}
- .ui-banner .ui-banner-slides{ width:654px;height:233px;left:1px;}
- .ui-banner .ui-banner-slides li{ display:none;position:absolute;}
- .ui-banner .ui-banner-slides li img{ width:654px;height:233px;border:none;}
- .ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner .ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides li.ui-banner-slides-next{ display:block;}
- .ui-banner .ui-banner-slides li.ui-banner-slides-current{ left:0;}