javascript - 根据 JavaScript 中的屏幕大小删除其他元素

Question

我创建了幻灯片/轮播，但我想根据屏幕尺寸显示偶数张图片。

因此，如果屏幕可以容纳 5 张图片，则 slider 将显示 5 张，依此类推。问题是如果屏幕只能容纳 4 张图片，我想删除第 13、14 和 15 张图片，这样屏幕上会同时显示 4 张图片，而不会在末尾显示 3 张图片。

在这个例子中:

var slides_div = document.getElementById("container");
for (var k=11; k<slides.length; k++) {
    slides_div.removeChild(slides_div.childNodes[k]);
}

这个位没有删除任何元素，但在我的计算机上它正在删除图像 5 和 6。在我的版本中，它是一个页面，带有内联 js/css，文件中没有其他内容。

var doc_width = $(document).outerWidth(true);
var slides = document.getElementsByClassName("slides");

if(doc_width > 1310){
	no_slides = 5;
}else if(doc_width > 1060){
	no_slides = 4;
	
	var slides_div = document.getElementById("container");
	for (var k=11; k<slides.length; k++) {
		slides_div.removeChild(slides_div.childNodes[k]);
	}
	
}else if(doc_width > 810){
	no_slides = 3;
}else if(doc_width > 560){
	no_slides = 2;     
}else if(doc_width > 310){
	no_slides = 1;
}

var first_slide = 0;
var last_slide = no_slides-1;
showDivs(first_slide,last_slide);

function prev_slides() {
	showDivs(first_slide -= no_slides, last_slide -= no_slides);
}
function next_slides() {
	showDivs(first_slide += no_slides, last_slide += no_slides);
}

function showDivs(f,l) {
	if (l > slides.length) {
		first_slide = 0;
		last_slide = no_slides-1;
	}
	if (l < 1) {
		first_slide = slides.length-no_slides;
		last_slide = slides.length-1;
	}
	for (var i=0; i<slides.length; i++) {
		$(slides[i]).css({"opacity": 0, "right":"+=250", "display":"none"});
	}
	for (var j=first_slide; j<=last_slide; j++){
		$(slides[j]).css({"opacity": 1, "right":"0", "display":"inline"});
	}
}

.container{
	width:100%;
	text-align:center;
}
.arrow{
	vertical-align:middle;
	width:30px;
}
.slides{
	position:relative;
	width:250px;
	opacity:0;
	right:-200px;
	display:none;
	vertical-align:middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="container">
	<img class="arrow" src="arrow_left.jpg" onclick="prev_slides()">
		<img class="slides" src="https://via.placeholder.com/250x100/111111?text=1">
		<img class="slides" src="https://via.placeholder.com/250x100/222222?text=2">
		<img class="slides" src="https://via.placeholder.com/250x100/333333?text=3">
		<img class="slides" src="https://via.placeholder.com/250x100/444444?text=4">
		<img class="slides" src="https://via.placeholder.com/250x100/555555?text=5">
		<img class="slides" src="https://via.placeholder.com/250x100/666666?text=6">
		<img class="slides" src="https://via.placeholder.com/250x100/777777?text=7">
		<img class="slides" src="https://via.placeholder.com/250x100/888888?text=8">
		<img class="slides" src="https://via.placeholder.com/250x100/999999?text=9">
		<img class="slides" src="https://via.placeholder.com/250x100/aaaaaa?text=10">
		<img class="slides" src="https://via.placeholder.com/250x100/bbbbbb?text=11">
		<img class="slides" src="https://via.placeholder.com/250x100/cccccc?text=12">
		<img class="slides" src="https://via.placeholder.com/250x100/dddddd?text=13">
		<img class="slides" src="https://via.placeholder.com/250x100/eeeeee?text=14">
		<img class="slides" src="https://via.placeholder.com/250x100/ffffff?text=15">
	<img class="arrow" src="arrow_right.jpg" onclick="next_slides()">
</div>

Answer 1

由于某种原因，它在图像之间拾取空对象。

然后在循环中，每个元素被删除后，事物的索引会有所不同，因此必须向后循环。

将其更改为以下内容，它按照我想要的方式工作:

var slides = document.getElementsByClassName("trustpilot_slides");
for (var k=slides.length-1; k>=14; k--) {
    var this_slide = slides[k];
    this_slide.parentNode.removeChild(this_slide);
}