![](/img/trans.png)
[英]Jquery Cycle Plugin issue with extending the slideshow “outside” the page boundary
[英]issue with jQuery Cycle plugin
这是原始的部门:
在应用jquery cycle插件后,图像脱离其底部边框,如下所示:
有什么想法吗?
这是该部门的CSS:
#hero {
float: right;
border-top: 1px solid #FFF;
width: 725px;
height: 370px;
background: #666;
}
#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
}
位置从相对更改为绝对(通过循环插件),这导致z索引更改,如@Orbling所说。 如果要使边框位于旋转器中图像的顶部,则可以绝对或相对地定位它们,并使其z索引高于容器。
要解决的问题:明确放置下部波浪形“边框”元素( position:relative; or position:absolute;)
*,并使其z索引高于旋转元素的z索引。
*如果未明确定位元素,则为元素提供比旋转器更高的z索引将不起作用 。 参见http://www.webdevout.net/test?0_
循环插件使用z-index,这可能是问题的根源。 从循环插件代码:
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
我将使用“ wave”的z-index,看看是否有帮助。
#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
z-index: 99;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.