Question

我想为每张照片制作一张自动图片幻灯片，下方有点。我根本不知道如何使用javascript，只是html / css，所以我发现这个代码片段在线，但我无法在我的固定标题后面滚动幻灯片。有什么建议？如果有人知道如何使点可点击以自动更改图片也会很棒！基本上，我希望我的幻灯片显示像http://www.eatchronictacos.com上的那个，减去悬停在点上的图像预览。谢谢你们

这是一个codepen：http://codepen.io/nrojina0/pen/jAZVJE

这是我的html（包含整个幻灯片代码段）：


C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Microsoft.Cpp.Platform.targets(64,5): error MSB8020: The build tools for Clang_3_8 (Platform Toolset = 'Clang_3_8') cannot be found. To build using the Clang_3_8 build tools, please install Clang_3_8 build tools.  Alternatively, you may upgrade to the current Visual Studio tools by selecting the Project menu or right-click the solution, and then selecting "Upgrade Solution...".

这是我的CSS：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="CSS/style4.css">
    <title>
        Bonlee Grown Farm
    </title>

</head>

<body>

<div id="header">

    <div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg@embarqmail.com </div>

    <nav>
        <ul>
            <li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
            <li> <a href="OurStory.html"> Our Story </a> </li>
            <li>
                <a href="WheretoFindUs.html"> Where to Find Us </a>
                    <ul>
                        <li> <a href="Market1.html"> Market1 </a> </li>
                        <li> <a href="Market2.html"> Market2 </a> </li>
                        <li> <a href="Market3.html"> Market3 </a> </li>
                        <li> <a href="Market4.html"> Market4 </a> </li>
                    </ul>
            </li>
            <li> <a href="FromOurFarm.html"> From Our Farm </a> </li>
            <li>
                <a href="FromOurKitchen.html"> From Our Kitchen </a>
                    <ul>
                        <li> <a href="Jams.html"> Jams </a> </li>
                        <li> <a href="Jellies.html"> Jellies </a> </li>
                        <li> <a href="Pickled.html"> All Things Pickled </a> </li>
                        <li> <a href="Relishes.html"> Relishes </a> </li>
                        <li> <a href="Mustards.html"> Mustards </a> </li>
                        <li> <a href="Miscellaneous.html"> Miscellaneous </a> </li>
                    </ul>
            </li>
            <li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
        </ul>
    </nav>
</div>   

<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-left: 1%;
  z-index: 2;
/*  max-height: 500px;
*/}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 3%;
  font-family: Verdana,sans-serif;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  margin-top: 3%;
  margin-left: 2.5%;
  font-family: Verdana,sans-serif;s
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 4</div>
  <img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 4</div>
  <img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 4</div>
  <img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">4 / 4</div>
  <img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>

<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

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

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>

</body>
</html>

Answer 1

在css中将z-index: 3添加到#header并按预期工作我猜：

#header {
    position: fixed;
    width: 100%;
    top: 0;
    height: 15em;
    background-color: #254117;
    z-index: 3;
}

如何让我的照片幻灯片留在我的标题后面

1 个答案: