我正在尝试制作一个标题相同的幻灯片

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

只需使用更改背景的JavaScript即可，但是您需要在标题div中添加一个ID：

的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