【发布时间】：2017-05-11 16:35:14
【问题描述】：
$(document).ready(function(){
$(".divs div.panel").each(function(e) {
if (e > 2)
$(this).hide();
console.log(e);
});
$("#next").click(function(){
if ($(".divs div.panel:visible:last").next().length != 0){
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:first").hide();
$(".divs div.panel:visible:first").hide();
}
else {
//either hide the next button or show 1st two again. :)
}
return false;
});
$("#prev").click(function(){
if ($(".divs div.panel:visible:first").prev().length != 0){
var curVisLen = $(".divs div.panel:visible").length;
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:last").hide();
if(curVisLen == 3){
$(".divs div.panel:visible:last").hide();
}
}
else {
// either hide the button or show last two divs
// $(".divs div.panel:visible").hide();
// $(".divs div.panel:last").show();
}
return false;
});
});body{
background-color: grey;
}
.dash-img-dv{
position: absolute;
width: 170px;
height: 221px;
-moz-box-shadow: inset 5px -59px 63px 4px #5642BE;
-webkit-box-shadow: inset 5px -59px 63px 4px #5642BE;
box-shadow: inset 5px -59px 63px 4px #5642BE;
}
.dash-img-dv img {
width: 170px;
height: 221px;
position: relative;
z-index: -1;
}
.dash-img-dv-ttle{
position: relative;
width: 153px;
height: 50px;
color: #fff;
margin-left: 16px;
margin-top: 167px;
z-index: 1;
}
.panel{
display: inline-block;
margin-left: 10px;
}
.gallery {
background: #CCC;
position: relative;
margin: 0 auto;
padding-top: 22px;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
background: #5642BE;
transform: translateY(-50%);
}
.prev-next-button a{
color: #fff;
position: absolute;
left: 28%;
top: 21%;
}
.previous { left: -16px; }
.next { right: -16px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="divs">
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title1</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title2</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title3</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title4</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title5</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title6</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title7</p>
</div>
</div>
</div>
<!-- <a id="prev">prev</a>
<a id="next">next</a> -->
<div class="prev-next-button previous">
<a id="prev"><span class="fa fa-chevron-left"></span></a>
</div>
<div class="prev-next-button next">
<a id="next"><span class="fa fa-chevron-right"></span></a>
</div>
</div>我想使用 jquery 显示我的下一个上一个 div。我尝试了类似下面的方法。一切都很好，但问题是现在图像没有显示。是否有任何 z-index 问题或类似问题？我找不到图像未显示的原因。有人可以帮我展示图片吗？这是写脚本之前的图片
【问题讨论】：
标签： javascript jquery css angularjs twitter-bootstrap