前端之家

  1. 首页
  2. 问答

当滑块的幻灯片可见/隐藏时如何显示/隐藏div

• 问答 

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
#arrow-back,#arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

我有一个滑块，通过单击上一个/下一个按钮可以看到和隐藏幻灯片，并且滑块外面有四个div方块。我希望当例如幻灯片3可见时，正方形3可见。

我已经尝试过此脚本，但是它不起作用 

if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }

CSS 

  #arrow-back,#arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }

HTML 

<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

jQuery 

    $(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }

我更改了您的代码

wqs695932489 回答：当滑块的幻灯片可见/隐藏时如何显示/隐藏div

如果任务是重复对可见性的检查，然后根据上述检查做出决定以显示还是隐藏该框，则尝试在每个事件处理程序中查找代码。

$("#arrow-back").click(function(){
     .
     .
     . Perform the task meant for click
     // show/hide squares
    showHideFunction();
});
function showHideFunction(){
if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
}
,

请检查一下。

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
#arrow-back,#arrow-next {
    background:black;
    height: 40px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    //background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

,

我认为您最好将“ id”添加到您的 这会起作用

javascriptjqueryshow-hideslider
本文链接：https://www.f2er.com/3037215.html

大家都在问