Question

我想为图片幻灯片创建两个按钮我正在创建两个垂直居中并粘在边缘上的按钮。就像这样：

我使用以下代码在HTML中创建了两个按钮：

<button class="button_left" >"left"</button>
<button class="button_right">"right"</button>

我想确保每按一次按钮，它就会使用CSS向左或向右移动。我不确定如何做到这一点。

这是我的代码：

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Untitled Document</title>
    </head>
    <body>
      <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">
                <img src="1.jpg" class="slider-image" />
                <img src="2.jpg" class="slider-image" />
                <img src="3.jpg" class="slider-image" />
    <button class="button_left" >"left"</button>
    <button class="button_right">"right"</button>

            </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>
    </body>

    </html>

.slider-holder
        {
            width: 800px;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }

        .image-holder
        {
            width: 2400px;
            background-color: red;
            height: 400px;
            clear: both;
            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;
        }

        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }

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

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

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }

Answer 1

在父元素上使用position:relative。

#parent{
 position:relative;
}

然后在父级内部创建两个buttons，并将它们相对于父级放置。

#left-btn, #right-btn{
 position:absoulte;
 top:50%;
}
#left-btn{
 left:0;
}
#right-btn{
 right:0;
}

示例：

＆＃13;

#slideshow{
  position:relative;
  display:inline-block;
}
#left-btn, #right-btn{
  position:absolute;
  top:calc(50% - 1em);
}
#left-btn{
  left:0;
}
#right-btn{
  right:0;
}

＆＃13;

<div id='slideshow'>
  <img src="https://picsum.photos/200/300/?random" />
  <input id='left-btn' type='button' value='<' />
  <input id='right-btn' type='button' value='>' />
</div>

＆＃13;

添加两个侧面按钮以进行图像幻灯片放映

1 个答案: