时间戳

首页 > 解决方案 > 在 JavaScript 中根据屏幕大小删除附加元素

javascript - 在 JavaScript 中根据屏幕大小删除附加元素

问题描述

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

因此，如果屏幕可以容纳 5 个图像，则滑块将显示 5 个等。问题是如果屏幕只适合 4 我想删除第 13、14 和 15 个图像，以便它一次在屏幕上显示 4 个图像，并且最后不会显示三个有间隙的图像。

在这个例子中：

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>

标签： javascripthtmlcss

解决方案

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

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

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

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);
}

推荐阅读