1

我正在尝试使用 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

编辑：任何人都知道将鼠标移出容器元素时导航元素消失的原因是什么？

4

1 回答 1

1

它们没有显示，因为您将它们隐藏：更改以下内容：

div#slideshow ul#navigation {
  display: none;
  list-style-type: none;
  position: relative; top: 375px; z-index: 15;
}

对此：

div#slideshow ul#navigation {
  display: block;
  list-style-type: none;
  position: relative; top: 375px; z-index: 15;
}

请注意，我使用display:block;了而不是display:none;

于 2013-01-18T18:00:21.017 回答