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>
這不是真正意義,因爲cityskapes鏈接是在導航一個單獨的按鈕,爲什麼我會被移除它的父? –
@TirthRami bxSlider每張幻燈片動態生成至少2個div,並將它們包裹在li上。 – zer00ne