Question

我正在使用CoDrops的垂直手风琴。我遇到的问题是每当我添加更多的图像切片而不是我在javascript中列出的visibleSlices的数量时，它们就不会溢出：隐藏（如我的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;
}

Answer 1

为什么你没有溢出：隐藏;在.va-container {}？

垂直手风琴溢出和滚动问题

1 个答案: