HTML CSS 轮播主页

Question

您好，我对 Html 和 css 比较陌生，最近开始制作和设计自己的网站。到目前为止，我所做的是拥有 4 张图像，这些图像将成为我在网站主页上轮播的一部分，并使它们成为它所处屏幕的宽度和高度。我在旋转木马上有一个覆盖层，因为我想让网站内容即下一个/上一个按钮、旋转木马点和导航栏更引人注目。轮播将允许用户导航到网站上的不同页面。我还有什么要用旋转木马点来向用户显示有多少张幻灯片，但到目前为止我只是想让圆点显示在屏幕顶部，这不是我想要的，因为我最终想把我的导航酒吧那里。我试图将它的位置设置为绝对位置，但它只显示一个点，而应该有四个点。如果有人能帮我解决这个问题并解释我做错了什么，那就太好了，并且还指出了向轮播节目添加不同内容的方向，我可以将用户带到网站的另一部分，例如轮播上的幻灯片 1是图库页面，轮播上的幻灯片 2 是联系页面。

我知道我问了很多，所以非常感谢您花时间阅读本文并提供帮助。

这是我的 HTML:

<div class="carousel-content">
    <!--<div>-->
    <img class="image1" src="Images/WebTest_Image.jpg">
    <!--<div class="carousel-text">Caption</div>-->
    <!--</div>-->
    <img class="image1" src="Images/Carlingford_Fourseasons_HQ.jpg">
    <img class="image1" src="Images/Flowers.jpg">
    <img class="image1" src="Images/WebTest_Image3.png">
    <div class="overlay" />

    <a class="carousel-left" onclick="plusSlides(-1)">&#10094;</a>
    <a class="carousel-right" onclick="plusSlides(1)">&#10095;</a>
<!--</div>-->

    <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
    </div>
</div>


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

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("image1");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        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";
    }
</script>

这是我的 CSS:

.carousel-content {
background-position: center;
width:100%;
height:100%;
top:0;
left:0;
position: fixed;
margin:auto;
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    background: rgba(0,0,0,0.5)
}

.image1 {
    display:none;
    width:100%;
    min-height:100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    background-position:center;
    background-size:cover;
}

.carousel-nav {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
background-color: inherit;
text-align: center;
cursor:pointer;
white-space: nowrap;
background-color: transparent;
color: #fff;
font-size:xx-large;
font-weight:bold;
width: 3%;
height: auto;
}

.carousel-left {
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
-ms-transform: translate(-0%,-50%);
color:#b2acab;
}

.carousel-right {
position: absolute;
top: 50%;
right: 0%;
transform: translate(0%,-50%);
-ms-transform: translate(0%,-50%);
color:#b2acab;
}

.dot {
display:inline-block;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

谢谢

Answer 1

您可以对 div 进行绝对定位，使点位于父 div 的底部。

div class="rel">
    <span class="dot" onclick="currentSlide(1)"></span>

...

.rel {
    position: absolute;
    left: 50vw;
    bottom: 0;
}