javascript - 在幻灯片叠加层上显示隐藏可见性

Question

我正在放映幻灯片(通过滑动器)，我想使用覆盖幻灯片的覆盖图。出于设计原因，overlay div 必须位于 swiper 容器内，而 overlay 的链接必须位于该容器外。 我尝试使用点击功能，但由于某种原因它不起作用并且叠加层没有显示。有人知道如何解决这个问题或我做错了什么吗？谢谢。

       var swiper = new Swiper('.swiper-container', {
          slidesPerView: 1,
          spaceBetween: 0,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
        
        
        
    $('#test').click(function(){
      if ( $('#five-detail').css('visibility') == 'hidden' )
        $('#five-detail').css('visibility','visible');
      else
        $('#five-detail').css('visibility','hidden');
    });

    #five-details {
      background-color:red;
      position:absolute;
      z-index:10100;	  
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      visibility: hidden;
    }    
        
        
    .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      }
    
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      }
        

<link href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swiper-container" id="five">
    
    	<div id="five-details">
    			test
    	</div>
    
        <div class="swiper-wrapper">
        	<div class="swiper-slide">
          		<img src="https://s-media-cache-ak0.pinimg.com/originals/e2/8e/f5/e28ef573c88440fe1fdbaeb8ffa19123.jpg" width=100%/>
    		</div>
        	<div class="swiper-slide">
          		<img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Wayne_campus_scienglib_900x600.jpg" width=100%/>
    		</div>
        	
        </div>
        
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    
    <a href="#test">DETAILS</a>

Answer 1

对于第一点，您在 href 中使用了#test，并在没有带有 id="test"的 div 时在 #test 上使用了点击功能。

其次overlay的id在HTML中是五元，在Javascript中是五元。您在 javascript 部分缺少一个 s。

我还添加了用于 anchor 测试的 CSS。

检查这个 JsFiddle

https://jsfiddle.net/1v2313v9/39/

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    
    
    
$('#test').click(function(){
  if ( $('#five-details').css('visibility') == 'hidden' )
    $('#five-details').css('visibility','visible');
  else
    $('#five-details').css('visibility','hidden');
});

#five-details {
	background-color:red;
	position:absolute;
	z-index:10100;	  
	width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
}    

#test {
  z-index:10101;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}
    
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  }

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  }
    

<link href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script>
<div class="swiper-container" id="five">

	<div id="five-details">
			test
	</div>

    <div class="swiper-wrapper">
    	<div class="swiper-slide">
      		<img src="https://s-media-cache-ak0.pinimg.com/originals/e2/8e/f5/e28ef573c88440fe1fdbaeb8ffa19123.jpg" width=100%/>
		</div>
    	<div class="swiper-slide">
      		<img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Wayne_campus_scienglib_900x600.jpg" width=100%/>
		</div>
    	
    </div>
    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<a id="test">DETAILS</a>