javascript - z-index 图像在使用下一个上一个按钮时不显示，例如使用 jquery 的图像库

标签 javascript jquery css angularjs twitter-bootstrap 

$(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 问题或类似问题？我找不到图像不显示的原因。谁能帮我展示一下图片？这是写脚本前的图片 enter image description here

最佳答案

图像上的负 z-index 会将其推到页面上未定位的所有其他内容的后面。将 z-index 添加到 .panel 以便图像上的负 z-index 不会将其推到 .panel 后面 并将其保持在 .panel 和您希望它显示在下方的具有内部框阴影的元素之间。

$(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;
  position: relative;
  z-index: 1;
}
.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>

关于javascript - z-index 图像在使用下一个上一个按钮时不显示，例如使用 jquery 的图像库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43921147/

上一篇：javascript - 我怎样才能镜像这个动画？

下一篇：javascript - 使用拖放 HTML 上传图片

相关文章：

html - 复杂的设计模式-重叠透明形状？

javascript - 拆分数组的元素

c# - 在 Microsoft 的 MVC 和 Javascript 之间共享本地化 ui 字符串的规范方法是什么？

javascript - 悬停时的 jquery 图像预览 - 如何设置固定位置？

javascript - 存储一个数组以在不同页面上访问

javascript - jQuery.lazy() 插件不适用于通过 AJAX 加载的图像

javascript - 选中时单选按钮更改样式

css3 Flexbox 3列布局小宽度，拉伸(stretch)中间一和宽度: max-200px on right

javascript - 你如何在客户端处理复杂的 JavaScript 对象？

html - float 元素超出页脚

©2024 IT工具网  联系我们