我正试着用同样的标题做一个幻灯片

Question

我希望在该代码中添加更多图像，以便使其成为幻灯片，但保留h1和h2标记，即使图像在这里滑动，我拥有的代码也能正确显示顶部带有标题的图像: HTML：

<header class="header-image">
    <div class="headline">
        <div class="title">
            <h1>SanDesigns</h1>
            <h2>The RENDERS you are looking for</h2>
    </div>
  </div>
</header>

CSS：

.header-image {
display:block;
width:100%;
background:url(Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg)  no-repeat;
min-height:605px;
margin-top:-1px; 
}

.title {
padding-left: 15%;
padding-top:5%;
font-family:GeosansLight;
}

.title h1 {
width: 18.75%;
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
color:#FFF7F7;
}

.title h2 {
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
width:30%;
color:#FFF7F7;
}

好的，还有另外一段代码，我可以在其中进行幻灯片演示，但在这段代码中，我可以使用h1和h2标记来放置div：

<nav class="navbar">
<ul>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#diseños">Diseños</a></li>
    <li><a href="#articulos">Articulos</a></li>
    <li><a href="#equipo">Equipo</a></li>
    <li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<header class="slideshow">
<img class="header-image" src="Architectural-Photorealistic-3D-Renders.jpg">
<img class="header-image" src="Channel-Place-Residence_LA.jpg">
<img class="header-image" src="Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg">
<img class="header-image" src="p2010018-20110510-view1-modepark.jpg">
</header>

和脚本：

<script>
var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("header-image");
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 6000); // Change image every 6 seconds

}

Answer 1

只需使用更改背景的javascript，但需要将id添加到头文件div：

HTML

<header class="header-image" id="changingHeader">
    <div class="headline">
        <div class="title">
            <h1>SanDesigns</h1>
            <h2>The RENDERS you are looking for</h2>
    </div>
  </div>
</header>

JAVASCRIPT

<script language="javascript">
var currentImg = 1;
function changeBg(imgNumber){

var images = ['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg']

document.getElementById('changingHeader').style.backgroundImage = "url("+images[imgNumber]+")";
if (currentImg <= 3){
      currentImg ++;
}else{
currentImg = 0;
}

}
setInterval(function(){
    changeBg(currentImg);
}, 5000);  // this will run every 5 seconds
</script>

CSS

.header-image {
display:block;
width:100%;
background:url(img1.jpg)  no-repeat;
min-height:605px;
margin-top:-1px; 
}

.title {
padding-left: 15%;
padding-top:5%;
font-family:GeosansLight;
}

.title h1 {
width: 18.75%;
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
color:#FFF7F7;
}

.title h2 {
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
width:30%;
color:#FFF7F7;
}

Answer 2

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>

</div>

请检查此链接：-http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self