Question

所以，我有这个项目，其中显示带有字幕的图像，当你点击下一个按钮＆＃34;幻灯片＆＃34;显示，正在显示的幻灯片被隐藏。到现在为止还挺好。我的问题是：我需要创建一个按钮来检查当前可见的div并将其隐藏并显示之前具有相同类别的div＆＃34; slide＆＃34;。我还需要帮助我点击按钮显示下一张幻灯片的部分，以显示仅具有相同课程的部分，我有它搜索父元素的方式。

所以，

<button class="back"></button>
<div class="slide  active">

    <div class="trapezoid"><img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /></div>

    <div class="hover_capt"></div>

    <div class="capt">
      <p>Tinha 24 Freiras</p>
      <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

    <div class="trapezoid"><img src="" alt="" /></div>

    <div class="hover_capt"></div>

    <div class="capt">
      <p>Tinha 24 Freiras</p>
      <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

    <div class="trapezoid"><img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /></div>

    <div class="hover_capt"></div>

    <div class="capt">
      <p>Tinha 24 Freiras</p>
      <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

    <div class="trapezoid"><img src="" alt="" /></div>

    <div class="hover_capt"></div>

    <div class="capt">
      <p>Tinha 24 Freiras</p>
      <p>Mandei-as Fazer um Doce</p>
  </div>

</div>

CSS：

.slide{
  width: 100%;
  height:500px;
  display:none;
}

.centerer{
  width: 100%;
}

.trapezoid { 
  width: 500px;
  height: 333px;  
  background-color: white; 
  margin: 0 auto;
  margin-top:50px;
}

.trapezoid img{
  max-width: 100%; 
  max-height: 100%; 
  width: auto;
  height: auto;
}

.hover_capt{
  width:50px;
  height:50px;
  background-color:red;
  margin: 0 auto;
  position:relative;
  top:-25px;
  border-radius: 50%;
}

.capt{
  text-align:center;
  z-index: -999;
  width:500px;
  background-color:beige;
  margin: 0 auto;
  position:relative;
  padding-top: 30px;
  padding-bottom: 20px;
  height: 60px;
  top:-50px;
  display:none;
}

/* Center the demo */
html, body { height: 100%; }
body {
  background-color:#330033;
}

.back{
  width:20px;
  height: 20px;
  background-color: pink;
  outline: none;
}

.active{
    display:inline;
}

和Jquery

$(document).ready(function(){

$( ".hover_capt" ).hover(function() {
    $( this ).parent().find('.capt').slideToggle();
  }
);

$(".hover_capt").click(function(){

  $(this).parent().removeClass('active');
  $(this).parent().next().addClass('active');

});

$(".back").click(function(){





});



});

最后是Pen

修改

$(document).ready(function() {

  $(".trapezoid").hover(function() {
    $(this).siblings('.capt').slideToggle();
  });

  $(".hover_capt").click(function() {
    $(this).parent().removeClass('active');
    $(this).parent().next('.slide').addClass('active');
    if(current.next('.slide').is('.slide:first')) {
      $('.hover_capt').hide();
    }
    $('.back').show(); 
  });

  $(".back").click(function() {
    var current = $('.active');
    current.removeClass('active');
    current.prev('.slide').addClass('active');
    if(current.prev('.slide').is('.slide:first')) {
      $('.back').hide();
    }
  });

});

新查询

并更新了Pen

Answer 1

所以你的jQuery需要一点点清理，它会好得多。

通过父母搜索很好，但在.next()调用中，您可以指定选择器。

我还添加了后退按钮的功能，并更改了对兄弟姐妹进行幻灯片切换的调用，而不是进行父调用。它会略微减少所需的代码量。

＆＃13;

$(document).ready(function() {

  $(".hover_capt").hover(function() {
    $(this).siblings('.capt').slideToggle();
  });

  $(".hover_capt").click(function() {
    $(this).parent().removeClass('active');
    $(this).parent().next('.slide').addClass('active');
    if($(this).parent().next('.slide').is('.slide:last')) {
      $('.hover_capt').hide();
    }
    $('.back').show(); 
  });

  $(".back").click(function() {
    var current = $('.active');
    current.removeClass('active');
    current.prev('.slide').addClass('active');
    if(current.prev('.slide').is('.slide:first')) {
      $('.back').hide();
    }
  });

});

＆＃13;

.slide {
  width: 100%;
  height: 500px;
  display: none;
}
.centerer {
  width: 100%;
}
.trapezoid {
  width: 500px;
  height: 333px;
  background-color: white;
  margin: 0 auto;
  margin-top: 50px;
}
.trapezoid img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.hover_capt {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 0 auto;
  position: relative;
  top: -25px;
  border-radius: 50%;
}
.capt {
  text-align: center;
  z-index: -999;
  width: 500px;
  background-color: beige;
  margin: 0 auto;
  position: relative;
  padding-top: 30px;
  padding-bottom: 20px;
  height: 60px;
  top: -50px;
  display: none;
}
/* Center the demo */

html,
body {
  height: 100%;
}
body {
  background-color: #330033;
}
.back {
  width: 20px;
  height: 20px;
  background-color: pink;
  outline: none;
  display: none;
}
.active {
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="back"></button>
<div class="slide  active">

  <div class="trapezoid">
    <img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" />
  </div>

  <div class="hover_capt"></div>

  <div class="capt">
    <p>Tinha 24 Freiras</p>
    <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

  <div class="trapezoid">
    <img src="" alt="" />
  </div>

  <div class="hover_capt"></div>

  <div class="capt">
    <p>Tinha 24 Freiras</p>
    <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

  <div class="trapezoid">
    <img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" />
  </div>

  <div class="hover_capt"></div>

  <div class="capt">
    <p>Tinha 24 Freiras</p>
    <p>Mandei-as Fazer um Doce</p>
  </div>

</div>
<div class="slide ">

  <div class="trapezoid">
    <img src="" alt="" />
  </div>

  <div class="hover_capt"></div>

  <div class="capt">
    <p>Tinha 24 Freiras</p>
    <p>Mandei-as Fazer um Doce</p>
  </div>

</div>

＆＃13;

希望这可以按预期工作

需要检查div可见性以创建“导航菜单”

1 个答案: