0

我正在使用 CoDrops 的垂直手风琴。我遇到的问题是,每当我添加的图像切片数量超过我在 javascript 中列出的可见切片数量时,它们就不会溢出:隐藏(如我的 css 中列出的那样。)额外的图像切片放在最后一个下方图像切片和页面变得更长(因为溢出隐藏不起作用,我假设。)此外,应该有箭头出现,用户可以单击以滚动到下一个(隐藏的)图像切片。虽然这些确实出现在屏幕上,但如果单击它们或者如果您正在查看图像切片集中的最后一个图像并单击下一个箭头(不知道它是最后一个图像),它们不会滚动,然后所有图像和文本消失留下一个空白的白色页面,除非您刷新页面,否则该页面不会自行纠正。

任何帮助将不胜感激!谢谢!

我的手风琴 javascript 如下所示:

<script type="text/javascript">
        $(function() {
            $('#va-accordion').vaccordion({
                accordianW: $(window).width(1000),
                accordianH: $(window).height(450),
                expandedHeight: 450,
                visibleSlices: 8,
                animOpacity: .2,
            });
        });
        </script>

我的垂直手风琴 css 看起来像这样:(仅显示许多图像切片中的 1 个)

.va-container{
position:relative;
top:50px;
margin:0px auto 0 auto;
}
.va-wrapper{
width:100%;
height:100%;
position:relative;
overflow:hidden;
background:#FFF;
}
.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:100px;
overflow:hidden;
}
.va-slice-1{
background:#FFF url(../images/testa.jpg) no-repeat center center;
}

(这是我的滚动按钮 css :)

.va-nav span{
width:40px;
height:25px;
background:transparent url(../images/prev.png) no-repeat center center;
position:absolute;
top:-35px;
left:50%;
margin-left:-20px;
text-indent:-9000px;
opacity:0.5;
cursor:pointer;
display:none;
z-index:100;
}
.va-nav span.va-nav-next{
background-image:url(../images/next.png);
top:auto;
bottom:-35px;
}
.va-nav span:hover{
opacity:1.0;
}

CoDrop 的 javascript 看起来像这样:(他们不使用演示页面上列出的选项,但他们的手风琴做了它应该做的事情。)

<script type="text/javascript">
        $(function() {
            $('#va-accordion').vaccordion();
        });
    </script>

CoDrop 的 css 看起来像这样:

.va-container{
position:relative;
margin:40px auto 0 auto;
}
.va-wrapper{
width:100%;
height:100%;
position:relative;
overflow:hidden;
background:#000;
}
.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:0px;
overflow:hidden;
}
.va-slice-1{
background:#000 url(../images/1.jpg) no-repeat center center;
}

CoDrop 的滚动按钮 css:

.va-nav span{
width:40px;
height:25px;
background:transparent url(../images/prev.png) no-repeat center center;
position:absolute;
top:-35px;
left:50%;
margin-left:-20px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
display:none;
z-index:100;
}
.va-nav span.va-nav-next{
background-image:url(../images/next.png);
top:auto;
bottom:-35px;
}
.va-nav span:hover{
opacity:1.0;
}
4

1 回答 1

0

为什么你没有溢出:隐藏;在 .va 容器 {} 中?

于 2012-07-22T15:34:23.960 回答