Question

我目前正在尝试为该网站创建一个简单的幻灯片。每当我单击按钮时，页面就会跳下来。那么，如何创建锚点，以便当用户单击按钮时它将停留在页面的该部分？

<div class="slider-holder" >
    <span id="slider-image-1"></span>
    <span id="slider-image-2"></span>
    <span id="slider-image-3"></span>
    <div class="image-holder">
      ......
    </div>
    <div class="button-holder">
        <a href="#slider-image-1" class="slider-change"></a>
        <a href="#slider-image-2" class="slider-change"></a>
        <a href="#slider-image-3" class="slider-change"></a>
    </div>
</div>

添加了CSS的某些部分-希望它将提供更多的见解

  .slider-holder
    {
        width: 1114px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;

    }

    .image-holder
    {
        width: 6000px;
        height: 200px;
        position: relative;

        -webkit-transition: left 2s;
        -moz-transition: left 2s;
        -o-transition: left 2s;
        transition: left 2s;
    }

    .slider-image
    {
        float: left;
        margin: 0px;
        padding: 0px;
        position: relative;
        overflow: hidden;
    }
    #slider-image-1:target ~ .image-holder
    {
        left: 0px;
    }

    #slider-image-2:target ~ .image-holder
    {
        left: -1114px;
    }

    #slider-image-3:target ~ .image-holder
    {
        left: -2228px;
    }

......

我对它还很陌生，我一直在这里寻找一些类似的问题，但没有任何帮助，我将不胜感激：）

谢谢

Answer 1

使图像的容器成为锚点，而不是图像本身。我假设您一次显示1张图片。如果您愿意，可以使用引导程序的轮播。

https://getbootstrap.com/docs/4.0/components/carousel/

按钮使页面跳下

1 个答案: