问题与jQuery周期插件

将jQuery周期插件的图像后得到了其底边框的是这样的：

任何想法为什么？

这里是分裂的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; 
}

来源

2011-10-14 tejinderss

哪里是你的HTML代码？所有的浏览器，或只是一个？ – Sparky

'Z-index'变化？ – Orbling

http://dpaste.com/634461/ – tejinderss

周期插件使用的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) 
    });

我会玩“波”的Z指数，看看是否没有帮助。

#wave { 
width: 970px; 
height: 40px; 
position: absolute; 
left: 0; 
bottom: 0; 
background: url(../img/wave.png) no-repeat bottom left; 
z-index: 99; 
}

来源

2011-10-14 16:50:28 mikey

谢谢，我想通过upvoting向你展示我的赞赏，但是stackoverflow不会让我。再次感谢。 – tejinderss

@ user867365你可以“接受”答案来表示你的赞赏。 –

位置从相对于绝对（由循环插件）改变，导致z-index变化如@Orbling所述。如果您希望边界位于旋转器中的图像的顶部，则可以绝对或相对地定位它们并为它们指定一个高于容器的z-index。

要解决：明确定位较低的波浪形“边界”元素（position:relative; or position:absolute;) *，并给它的z-index比旋光器元件的高

*给元素较高的Z-指数比肩。将不行如果元素没有被明确定位。看到http://www.webdevout.net/test?0_

来源

2011-10-14 17:05:43

非常感谢这些信息。 – tejinderss

+1由于显而易见的原因和正确的。 ;-) – Orbling

问题与jQuery周期插件

回答

相关问题