Question

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

因此，如果屏幕可以容纳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>

Answer 1

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

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

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

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies.</div>
<div class="one-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies.</div>

Answer 2

您可以使用CSS媒体查询来隐藏最后3个HTML元素。

@media only screen and (max-width: 300px) {
  .hideme {
    display:none;
  }
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="hideme">5</div>
<div class="hideme">6</div>
<div class="hideme">7</div>

JS-根据屏幕尺寸删除其他元素

2 个答案: