在弹出图像上显示上一个和下一个图标 [英] Show Previous and Next icon over popup image
本文介绍了在弹出图像上显示上一个和下一个图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在下一张和上一张上弹出图片。不幸的是，图标仍然留在弹出的图像后面。我已经设置了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;
}
函数视图（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>
完整的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- （））; click（function（）{curSlide = $（。slides li：visible）;}（）;}）; $（。slider-controls a：nth-child（2）） ; $（。slides li）。hide（）; if（curSlide.next（）。length）curSlide.next（）。show（）; else curSlide.parent（）。find（li：first-child ）.show（）; return false;}）;}）;
.slider，.slider .slides，.sli der li {list-style：none;保证金：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;}
< 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/6alt =Slide/>< / li> < li id =slide-2>< img src =http://lorempixel.com/400/200/animals/2alt =Slide/>< / li> < li id =slide-3>< img src =http://lorempixel.com/400/200/animals/3alt =Slide/>< / li> < li id =slide-4>< img src =http://lorempixel.com/400/200/animals/4alt =Slide/>< / li> < li id =slide-5>< img src =http://lorempixel.com/400/200/animals/5alt =Slide/>< / li> < / UL> < div class =slider-controls> < a href =＃>& lsaquo;< / a> < a href =＃>& rsaquo;< / a> < / div>< / div>
I want to show next and previous on over the pop up images. Unfortunately, the icon still stay behind the popup image. I have set the z-index to it but it still stay behind the pop up. 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;
}
javscript
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";
}
解决方案
For this scenario, do not attempt to give position: fixed, instead try giving position: absolute. This can be easily done using CSS. Have a look at this snippet:
.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="#">«</a>
<a href="#">»</a>
</div>
</div>
Full code with 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="#">‹</a>
<a href="#">›</a>
</div>
</div>
这篇关于在弹出图像上显示上一个和下一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
