javascript - 我正在尝试制作具有相同标题的幻灯片

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

好的，还有其他代码，我可以在其中进行幻灯片放映，但在这个代码中，我可以将 div 与 h1 和 h2 标签放在一起:

<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

---

<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