Question

我必须根据我的jsfiddle制作图片幻灯片。我需要在这个image之后再添加三个图像，这些图像已经存在于我的jsfiddle中。所以我会在图像的底部边框处再添加三个图像和三个点，如果我点击这些点，它应该显示其他图像，我想在我的幻灯片放映之上保留BESPOKE INSURANCE SOLUTIONS文本。

我尝试整合这个w3schools example，但是我原来的jsfiddle搞砸了，根本没有用。这是我的updated jsfiddle，你可以看到它搞砸了。解决这个问题的最佳方法是什么？

以下是我的代码：

<div class="header">
      <div class="header-background">
          <img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
     </div> 

         <div class="orange-bar">
            <img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
        </div>

        <div class="topnav">
             <nav>
                <ul>
                    <li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>

                </ul>

            </nav>
        </div>
        <h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
    </div>

这是我的CSS：

.header {
    position: relative;
    height: 769px;
}
.header-background {
    height: 769px;
    width: 100%;
}
.orange-bar {
    position: relative;
    top: -430px;
    left: -160px;
}
.topnav {
    position: relative;
    top: -890px;
    background-color: rgba(0, 0, 0, 0.8);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    overflow: hidden;
}
.topnav ul>li {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
}
li.home {
    position: relative;
    right: 40px;
}
li.insurance {
    margin-right: 80px;
    margin-left: 80px;
    left: 15px;
    position: relative;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
li.login-signup {
    font-style: italic;
    font-size: 10px;
    position: relative;
    left: 20px;
    top: 5px;
    font-family: Adelle PE;
    letter-spacing: .30em;
    color: white;
}
li.get-covered {
    border-color: #EF7440;
    border-style: solid;
    color: white;
    top: 3px;
    font-size: 12px;
    position: relative;
    left: 35px;
    letter-spacing: .30em;
    font-family: Adelle PE;
}
li.get-covered {
    margin-top: 15px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
li.login-signup {
    padding-top: 30px !important;
    position: relative;
    left: -35px;
}
li.insurance {
    padding-top: 30px !important;
}
body {
    border: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}
.header h1 {
    padding-left: 110px;
    color: white;
    text-align: center;
    font-size: 25px;
    left: -175px;
    letter-spacing: .300em;
    position: relative;
    top: -613px;
    font-family: "AvantGarde";
    text-transform: uppercase;
}

Answer 1

这是我的方式。您应该创建一个包含BESPOKE INSURANCE SOLUTIONS的div，设置position：absolute，align：left left。它保持文本没有变化。

幻灯片显示图像并始终保持文本

1 个答案: