1

前/次のナビゲーションでイメージサイクラーを作成しようとしています。実行しましたが、ナビゲーションボタンがimgに表示されません。テキストインデント-9999pxの背景を使用<li> a:し、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 に答える