我正在尝试使用 prev/next 导航制作图像循环器。我让它运行了,但导航按钮不会出现在 img 上。我使用<li> a:
了一个带有文本缩进-9999px的背景并将z-index设置为高于img。
CSS
div#slideshow {
width: 1920px; height: 816px;
overflow: scroll;
position: relative; z-index: 5;}
div#slideshow ul#navigation {
display: none;
list-style-type: none;
position: relative; top: 375px; z-index: 15;}
div#slideshow ul#navigation li#prev {
float: left;}
div#slideshow ul#navigation li#next {
float: right;}
div#slideshow ul#navigation li a {
display: block; width: 65px; height: 66px; text-indent: -9999px;}
div#slideshow ul#navigation li#prev a {
background: url(http://www.nobodyfilm.org/images/Arrow-Left.jpg);}
div#slideshow ul#navigation li#next a {
background: url(http://www.nobodyfilm.org/images/Arrow-Right.jpg);}
div#slideshow ul#slides {
list-style: none;}
jQ
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
$("#slideshow").hover(function() {
$("ul#navigationv").fadeIn();
},
function() {
$("ul#navigation").fadeOut();
});
});
HTML
<div id="container">
<div id="slideshow">
<ul id="navigation">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
<ul id="slides">
<li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Train-Station.jpg" alt="Pic1" /></li>
<li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Overview-and-Production.jpg" alt="Pic2" /></li>
<li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Themes-And-Philosophy.jpg" alt="Pic3" /></li>
</ul>
</div>
</div>
http://nobodyfilm.org/slideshow.html
编辑:任何人都知道将鼠标移出容器元素时导航元素消失的原因是什么?