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的底部。

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

...

if (randomChosenWord.includes(this.letter)) {

Answer 2

简单地给父元素一个类名

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

并将其定位为absolute

.dot-container{
    display: block;
    position: absolute;
    bottom: 0px;
    right: 50vh;
    z-index: 99;
}

还要确保旋转木马的主容器具有relative位置

HTML CSS Carousel主页

2 个答案: