Question

这是我从发现的示例中整理而成的幻灯片的MCVE。

我要解决的问题是防止文本的第四块覆盖图像（或被图像覆盖）。

第二个文本块位于第一和第二个文本块之间的图像之后，而幻灯片容器不影响第四个文本块的位置-好像幻灯片容器不在那里。我猜想这与CSS中的position有关。

将使用它的地方是在类似wordpress的CMS内部，该内容通过菜单，侧边栏包装内容。页脚等使页面具有响应性，因此我想保留该行为。

如何使第四个文本块符合幻灯片显示图像占用的空间？

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ; 
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  }

<h2>Title 1</h1>

<p>text before image.</p>

<img src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />

<h2>Title 2</h2>

<p>Text after image.</p>

<h2>Title 3</h1>

<p>text before slide.</p>

<div class="slideshow-container">
	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/miek22fw9ghqgw2/image2.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/l6ehi40kdlmli63/image3.jpg?raw=1" width="128" />
	</div>
</div>

<h2>Title 4</h2>

<p>Text after slide.  We want this title and text block to start after the image container so that this text is not on top of the image or obscured by it.</p>

Answer 1

您需要在.slideshow-container {}上设置高度。

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ; 
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  height: 200px;
  }

<h2>Title 1</h1>

<p>text before slide.</p>

<div class="slideshow-container">
	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/miek22fw9ghqgw2/image2.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/l6ehi40kdlmli63/image3.jpg?raw=1" width="128" />
	</div>
</div>

<h2>Title 2</h2>

<p>Text after slide.  We want this title and text block to start after the image container so that this text is not on top of the image or obscured by it.</p>

Answer 2

像这样吗？

GET

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ; 
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  }
  
 #slideMid
 
 {margin-left:500px;
 width:150px;
 height;50px;
 
 }

Answer 3

for k,v in dict.items():
 if user in k:
  print v

output: marcus {'TIME': 'Mar  3 08:19:17', 'CONNECTION': 'login'}

function setheight(slide){
  var height = slide.offsetHeight;
  var container = document.getElementsByClassName("slideshow-container")[0];
  container.style.height = height;
  container.setAttribute("style","height: " + height + "px");
}
document.getElementsByClassName("slideshow-container")[0].setAttribute("style","height: 225px");

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ;
      setheight(slides[i]);
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  }

使用js，您可以针对不同的高度执行此操作，此示例仅需要起始高度。只是js的一个示例，也许有用，也许没有用:)希望对您有所帮助

防止文字覆盖幻灯片图像

3 个答案: