您可以更改一些位以使其按预期工作:
在jquery.barousel.js
文件中,查找以下代码段:
//build the navigation
if (settings.navType == 1) {
//items navigation type
var strNavList = "<ul>";
并通过将class
(navigationMenu) 添加到ul
:
//build the navigation
if (settings.navType == 1) {
//items navigation type
var strNavList = "<ul class='navigationMenu'>";
在页面标题上,加载所有库后,添加以下代码段:
<script type="text/javascript">
$(function () {
// Look for all the spans which contains the class abs, and move them
// to the li accordingly.
$("span.abs").each(function (index, element) {
var target = $("ul.navigationMenu li")[index];
$(this).appendTo($(target).find("a"));
});
});
</script>
通过删除未使用的规则来更改您的 CSS:
.barousel {
height:408px;
margin-bottom:85px;
position:relative;
width:750px;
}
.barousel_wrap {
float:right;
height:408px;
width:650px;
}
.barousel_image {
background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/bgGrayGradient.jpg);
background-position:initial initial;
background-repeat:repeat no-repeat;
height:306px;
padding-left:10px;
width:660px;
}
.barousel_image img {
display:none;
position:absolute;
}
.barousel_image img.default {
display:block;
}
.barousel_image img.current {
z-index:10;
}
.barousel_content {
background-color:#6D4682;
background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/largegrad_05.jpg);
background-position:initial initial;
background-repeat:repeat no-repeat;
display:block;
height:auto;
margin:0;
padding:5px 10px 0;
width:650px;
}
.barousel_content div {
display:none;
margin-bottom:7px;
width:650px;
}
.barousel_content div.default {
display:block;
height:auto;
padding-bottom:7px !important;
}
.barousel_content p {
color:white;
font-size:12px;
font-weight:normal;
line-height:16px;
margin-bottom:8px !important;
top:0;
z-index:50;
}
.barousel_content p.sliderH {
font-weight:bold;
margin-bottom:5px;
}
.barousel_nav {
float:left;
height:408px;
width:100px;
z-index:20;
}
/*.barousel_nav p.abs {
cursor:pointer;
display:inline-block;
font-size:11px;
left:5px;
margin:0 auto;
position:absolute;
text-align:center;
width:90px;
}
.barousel_nav p.abs1 {
top:35px;
}
.barousel_nav p.abs2 {
top:135px;
}
.barousel_nav p.abs3 {
bottom:140px;
}
.barousel_nav p.abs4 {
bottom:25px;
left:5px;
}*/
.barousel_nav ul {
float:right;
margin:0;
padding:0;
}
.barousel_nav li {
float:left;
/*font-size:0;
line-height:0;*/
list-style:none;
padding-left:3px;
}
.barousel_nav li a {
background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/BTN_01.jpg);
display:block;
/*font-size:0;*/
height:102px;
/*line-height:0;*/
text-decoration:none;
width:100px;
}
.barousel_nav li a:hover {
background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/current_BTN_01.jpg);
}
.barousel_nav li a.current {
background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/current_BTN_01.jpg);
}
最后,稍微改变你的 HTML:
<span class="abs">Value Proposition Development</span>
<span class="abs">Sales Engagement</span>
<span class="abs">Customer Communications</span>
<span class="abs">Insight-driven Lead Generation Campaigns</span>
工作演示:http: //jsfiddle.net/psFMs/2/
当然,还有一些 CSS 调整要做,让它看起来更漂亮,但关键就在这里。