javascript - 在弹出图像上显示上一个和下一个图标

Question

我想在弹出图像上显示下一张和上一张。不幸的是，该图标仍然留在弹出图像后面。我已经为它设置了 z-index，但它仍然停留在弹出窗口后面。HTML:

<div class="row-fluid">
    <div class="col-sm-12">
        <ul class="image-list">
            <li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
        </ul>
         <div class="navigation" id="nav">
            <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
            <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
        </div>
    </div>
</div>

CSS

.pup
    {
        width: 100%; height: 100%;
        background: #666;
        opacity: 0.7;
        position: fixed;
        top: 0px; left: 0px;
        z-index: 111;
        display: none;
    }
    .viewer{
        background: #666; padding: 12px;
        position: fixed; z-index: 222;
        text-align: center;
        display: none;
    }
    #nav{
        display: none;
        background:red;
        z-index: 333;
        color: #FFF;
    }

脚本

function view(src)
        {
            var viewer = document.getElementById("viewer");
            viewer.innerHTML ='<img src="' + src + '" id="img"/>';
            var img = document.getElementById("img");
            var iw=0, ih=0;
            var dw=0, dh=0;
            img.onload=function(){
                document.getElementById("ov").style.display="block"; 
                viewer.style.display="block";
                document.getElementById("nav").style.display="block";
                iw = viewer.offsetWidth;
                ih = viewer.offsetHeight;
                dw = window.innerWidth;
                dh = window.innerHeight;
                viewer.style.top = parseInt(dh/2-ih/2) + "px";
                viewer.style.left = parseInt(dw/2-iw/2) + "px";
            };
        }
        function hide2()
        {
            document.getElementById("viewer").style.display="none";
            document.getElementById("ov").style.display="none";
            document.getElementById("nav").style.display="none";
        }

Answer 1

对于这种情况，不要尝试提供 position: fixed，而是尝试提供 position: absolute。这可以使用 CSS 轻松完成。看看这个片段:

.slider, .slider .slides, .slider li {list-style: none; margin: 0; padding: 0; position: relative; width: 400px; height: 200px;}
.slider li {position: absolute; left: 0; top: 0;}
.slider li:first-child {z-index: 1;}

.slider .slider-controls a {position: absolute; text-decoration: none; font-size: 1.5em; color: #000; z-index: 10; top: 50%; left: 0; background-color: #000; color: #fff; width: 35px; line-height: 32px; text-align: center; height: 35px; border-radius: 100%; top: 100px; margin-top: -16px; right: 10px; left: auto;}
.slider .slider-controls a:first-child {left: 10px; right: auto;}

<div class="slider">
  <ul class="slides">
    <li><img src="http://lorempixel.com/400/200/animals/6" alt="Slide" /></li>
    <li><img src="http://lorempixel.com/400/200/animals/2" alt="Slide" /></li>
    <li><img src="http://lorempixel.com/400/200/animals/3" alt="Slide" /></li>
    <li><img src="http://lorempixel.com/400/200/animals/4" alt="Slide" /></li>
    <li><img src="http://lorempixel.com/400/200/animals/5" alt="Slide" /></li>
  </ul>
  <div class="slider-controls">
    <a href="#">&laquo;</a>
    <a href="#">&raquo;</a>
  </div>
</div>

使用 JavaScript 的完整代码:

$(function () {
  $(".slides li").hide();
  $(".slides li:first-child").show();
  $(".slider-controls a:nth-child(1)").click(function () {
    curSlide = $(".slides li:visible");
    $(".slides li").hide();
    if (curSlide.prev().length)
      curSlide.prev().show();
    else
      curSlide.parent().find("li:last-child").show();
    return false;
  });
  $(".slider-controls a:nth-child(2)").click(function () {
    curSlide = $(".slides li:visible");
    $(".slides li").hide();
    if (curSlide.next().length)
      curSlide.next().show();
    else
      curSlide.parent().find("li:first-child").show();
    return false;
  });
});

.slider, .slider .slides, .slider li {list-style: none; margin: 0; padding: 0; position: relative; width: 400px; height: 200px;}
.slider li {position: absolute; left: 0; top: 0;}
.slider li:first-child {z-index: 1;}

.slider .slider-controls a {position: absolute; text-decoration: none; font-size: 1.5em; color: #000; z-index: 10; top: 50%; left: 0; background-color: #000; color: #fff; width: 35px; line-height: 32px; text-align: center; height: 35px; border-radius: 100%; top: 100px; margin-top: -16px; right: 10px; left: auto;}
.slider .slider-controls a:first-child {left: 10px; right: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider">
  <ul class="slides">
    <li id="slide-1"><img src="http://lorempixel.com/400/200/animals/6" alt="Slide" /></li>
    <li id="slide-2"><img src="http://lorempixel.com/400/200/animals/2" alt="Slide" /></li>
    <li id="slide-3"><img src="http://lorempixel.com/400/200/animals/3" alt="Slide" /></li>
    <li id="slide-4"><img src="http://lorempixel.com/400/200/animals/4" alt="Slide" /></li>
    <li id="slide-5"><img src="http://lorempixel.com/400/200/animals/5" alt="Slide" /></li>
  </ul>
  <div class="slider-controls">
    <a href="#">&lsaquo;</a>
    <a href="#">&rsaquo;</a>
  </div>
</div>