本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页face可以查看 CSS 코드 复主代码 代码如下: <br>*{margin:0;padding:0;list-style-type:none;} <br>a,img{border:0;} <br>/* ui-banner */ <br>.ui- 배너{display:block;position:relative;width:820px;margin:20px auto;} <br>.ui-banner.ui-banner-invalid{display:none;} <br>.ui-banner,.ui- 배너 .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{높이:233px;} <br>.ui-banner .ui-banner-slides,. ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;} <br>.ui-banner ul{list-style-type:none;margin:0 ;padding:0;overflow:hidden;} <br>.ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;} <br>.ui-banner .ui-banner-slides li{display:none;position:absolute;} <br>.ui-banner .ui-banner-slides li img{width:654px;height:233px;border:none;} <br>.ui-banner .ui- 배너 슬라이드 li.ui-배너-슬라이드-현재,.ui-배너 .ui-배너-슬라이드 li.ui-배너-슬라이드-이전,.ui-배너 .ui-배너-슬라이드 li.ui-배너-슬라이드 -next{display:block;} <br>.ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;} <br>.ui-banner .ui-banner-slides li .ui-banner-slides-prev{왼쪽:-654px;} <br>.ui-banner .ui-banner-slides li.ui-banner-slides-next{왼쪽:654px;} <br>.ui-banner .ui-banner-slogans{배경:#009AC9;높이:213px;overflow:hidden;padding:10px 30px 10px 15px;width:118px;rightright:0;} <br>.ui-banner .ui-banner-slogans li {cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px 0 10px 10px;margin-left:5px;border-bottom :1px solid #79B4DF;목록 스타일:없음;목록 스타일 유형:없음;} <br>.ui-banner .ui-banner-slogans li.ui-banner-slogans-current{color:#FFF;} <br>.ui-banner .ui-banner-slogans li.ui-banner-slogans-prev{border-bottom:none;} <br>.ui-banner .ui-banner-arrow{display:block;width: 45px;개요:없음;} <br>.ui-banner .ui-banner-arrow.ui-banner-arrow-prev{왼쪽:-14px;top:100px;배경:투명 URL("images/hero-slider- arrow-left.png") 반복 없음 0 0;} <br>.ui-banner .ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;배경:transparent url(" Images/hero-slider-arrow-right.png") 반복 없음 0 0;} <br>.ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;} <br>.ui-banner .ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;} <br> XML/HTML 코드 复代码 代码如下: 大连 이连浩特 漠河 삼보 홍콩 舟山 JavaScript 코드 复代码 代码如下: <br>$(document).ready(function(){ <br>$('#banners').bannerize({ <br>셔플: 1, <br>간격: "5" <br>}); <br>}); <br>