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

本文介绍了在弹出图像上显示上一个和下一个图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在下一张和上一张上弹出图片。不幸的是，图标仍然留在弹出的图像后面。我已经设置了Z-index，但它仍然保持弹出状态。
html：

 < div class =row-fluid> 
< div class =col-sm-12> 
< ul class =image-list> 
< li>< img src =photos / g1.jpgalt =Photo number 1class =img-responsive img-thumbnailonclick =view（this.src）/> < /锂> 
< li>< img src =photos / g2.jpgalt =Photo number 2class =img-responsive img-thumbnailonclick =view（this.src）/> < /锂> 
< / ul> 
< div class =navigationid =nav> 
 < span class =next glyphicon glyphicon-arrow-rightid =nextonclick =next（）>< / span> 
< / div> 
< / div> 
< / div>

css

  .pup 
 {
 width：100％;身高：100％; 
背景：＃666; 
不透明度：0.7; 
位置：固定; 
 top：0px; left：0px; 
 z-index：111; 
 display：none; 
} 
 .viewer {
背景：＃666;填充：12px; 
位置：固定; z-index：222; 
 text-align：center; 
 display：none; 
} 
 #nav {
 display：none; 
背景：红色; 
 z-index：333; 
颜色：#FFF; 
}

javscript

 函数视图（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; 
}; 
} 
函数hide2（）
 {
 document.getElementById（viewer）。style.display =none; 
 document.getElementById（ov）。style.display =none; 
 document.getElementById（nav）。style.display =none;

解决方案

尝试给 position：fixed ，而不是尝试给 position：absolute 。这可以很容易地使用CSS完成。看看这段代码：

保证金：0;填充：0;位置：相对;宽度：400px; height：200px;}。slider li {position：absolute;左：0;滑块li：first-child {z-index：1;}。slider .slider-controls a {position：absolute;文字修饰：无; font-size：1.5em;颜色：＃000; z-index：10;顶部：50％;左：0; background-color：＃000;颜色：#fff;宽度：35px; line-height：32px; text-align：center; height：35px;边界半径：100％; top：100px; margin-top：-16px;右：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/6alt =幻灯片/>< / li> < li>< img src =http://lorempixel.com/400/200/animals/2alt =幻灯片/>< / li> < li>< img src =http://lorempixel.com/400/200/animals/3alt =幻灯片/>< / li> < li>< img src =http://lorempixel.com/400/200/animals/4alt =幻灯片/>< / li> < li>< img src =http://lorempixel.com/400/200/animals/5alt =幻灯片/>< / li> < / UL> < div class =slider-controls> < a href =＃>& laquo;< / a> < a href =＃>& raquo;< / a> < / div>< / div>

.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; }

.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;}

$(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; }); });