2017-08-02 123 views
0

如果點擊導航中的鏈接,我想刪除一些圖像。所以我寫了以下內容,但問題是圖像被刪除,但現在有兩張空白的幻燈片放置在圖像所在的位置。我怎樣才能擺脫這些呢?我檢查了其他相關的stackoverflow問題,但他們只提供我有的解決方案,但出於某種原因,它不能完全與我的實現一起工作。bxslider在刪除圖像後留下空白幻燈片

我沒有包含所有的html,但是我在頁面上包含了與bxslider相關的所有東西。

<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>

回答

1

嘗試,

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

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

這不是真正意義,因爲cityskapes鏈接是在導航一個單獨的按鈕,爲什麼我會被移除它的父? –

+0

@TirthRami bxSlider每張幻燈片動態生成至少2個div,並將它們包裹在li上。 – zer00ne