[英]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.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";
}
對於這種情況,請勿嘗試給定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="#">«</a> <a href="#">»</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="#">‹</a> <a href="#">›</a> </div> </div>
嘗試設置position:relative
對於#nav,z-index需要設置位置。
#nav {
position: relative;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.