Question

如果单击导航中的链接，我想删除一些图像。所以我写了以下内容，但问题是图像确实被删除了，但现在有2张空白幻灯片放在图片中。我怎样才能摆脱这些呢？我检查了其他相关的stackoverflow问题，但是他们只给出了我的解决方案，但由于某些原因，它并没有完全适用于我的实现。

我没有包含所有的html，但是我在页面上包含了与bxslider相关的所有内容。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <script type="text/javascript">
$(document).ready(function() {
  $('.bxslider').bxSlider({
    speed: 1000,
    auto: true,
    autoControls: false,
    pager: false,
    autoHover: true,
    autoControlsCombine: true,
    pause: 5000,
    mode: 'fade'
  });
});

function nocontext(e) {
  var clickedTag = (e == null) ? event.srcElement.tagName : e.target.tagName;
  if (clickedTag == "IMG")
    return false;
}
document.oncontextmenu = nocontext;

   $(document).ready(function(){
      $(".nav").localScroll({duration:300});

      $(".cityskapes-link").click(function(){
        $(".animals").remove();
        $(".bxslider").reloadSlider();
      });
    });

  </script>
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/photo.css">
  <title>Photography</title>
</head>

<body>
  <!-- Nav -->
  <div class="nav">
    <h1>TIRTH THE ARTIST PHOTOGRAPHY</h1>
    <ul id="nav-link-container">
  <li><a class="cityskapes-link" id = "nav-link">Cityskapes</a></li>
  <li><a class="animals-link" id = "nav-link">Animals</a></li>
  <li><a class="people-link" id = "nav-link">People</a></li>
  <li><a class="misc-link" id = "nav-link">Misc</a></li>
</ul>
  </div>

  <!-- Picture Slideshow -->
  <div id="slider">
    <ul class="bxslider">
      <li class="cityscapes"><img src="photos/NYC_Skyline_Revised.jpg"></li>
      <li class="cityscapes"><img src="photos/MinionDrawing-1.jpg"></li>
      <li class="animals"><img src="photos/NYC_Skyline_Daytime.jpg"></li>
      <li class="animals"><img src="photos/HeavenlySunrise-2.jpg"></li>
    </ul>
  </div>

＆＃13;

Answer 1

尝试，

var slider = $(".bx_slider").bxSlider({
    pager: false
});

$('.cityskapes-link').click(function() {
    $(this).parent().remove();
    slider.reloadSlider();
});

删除图像后，bxslider留下空白幻灯片

1 个答案: