在幻灯片叠加显示隐藏可见性

时间：2018-02-20 17:00:42

标签： javascript html css modal-dialog overlay

我正在进行幻灯片放映（通过swiper），我想使用覆盖幻灯片的叠加层。出于设计原因，覆盖div必须位于防溅盒内，并且覆盖层位于该容器外部。 我尝试使用点击功能，但由于某种原因它不起作用，并且叠加层没有显示。任何人都知道如何解决这个问题或者我做错了什么？感谢。

＆＃13;
＆＃13; 
       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');
    });
＆＃13; 
    #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;
      }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

首先，你在href中使用了#test，并且在没有div的情况下使用了#test上的点击功能=＆＃34; test＆＃34;。

其次，HTML中的叠加ID是五个细节，而Javascript中是五个细节。你在javascript部分缺少一个s。

我还为锚测试添加了CSS。

检查这个JsFiddle

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

＆＃13;
＆＃13; 
    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');
});
＆＃13; 
#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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

第一个错误 您正尝试通过id选择器<a href="#test">在jquery中访问此元素的$(#test) 这是错误的你应该将href更改为id <a id="test">

第二个错误 您尝试通过id选择器<div id="five-details">在jquery中访问此元素$(#five-detail)这是一个错误，$(#five-details)您错过了s

这是工作代码 https://jsfiddle.net/qhupujtk/

＆＃13;
＆＃13; 
    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',
      },
    });
    
    $(document).ready(function(){
    $('#test').click(function(){

  if ( $('#five-details').css('visibility') == 'hidden' )
    $('#five-details').css('visibility','visible');
    
  else
    $('#five-details').css('visibility','hidden');
});
    })
＆＃13; 
#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;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题