Question

我为自己的公司制作了一个新网站并制作了自己的滑块。滑块有效但图像无法正常显示：有没有办法轻松解决这个问题？源代码:(每个图像重复大部分代码）

<!doctype html>
<html>
<head>
    <link href="style_sheet.css" rel="stylesheet" title="style sheet" type="text/css" />
</head>
<body>
    <div>
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <span id="slider-image-4"></span>
        <span id="slider-image-5"></span>
        <span id="slider-image-6"></span>
        <span id="slider-image-7"></span>
        <span id="slider-image-8"></span>
        <span id="slider-image-9"></span>
        <div class="image-holder">
            <img src="../bee colouring page.jpg" class="slider-image" />
            <img src="../lol/Front cover.jpg" class="slider-image" />
            <img src="../lol/Ida front cover.jpg" class="slider-image" />
            <img src="../lol/ida.jpg" class="slider-image" />
            <img src="../lol/IMG_4305.JPG" class="slider-image" />
            <img src="../lol/IMG_4464[1].JPG" class="slider-image" />
            <img src="../lol/IMG_4465[1].JPG" class="slider-image" />
            <img src="../lol/IMG_4466[1].JPG" class="slider-image" />
            <img src="../lol/ltb team.JPG" class="slider-image" />
        </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>
          <a href="#slider-image-4" class="slider-change"></a>
          <a href="#slider-image-5" class="slider-change"></a>
          <a href="#slider-image-6" class="slider-change"></a>
          <a href="#slider-image-7" class="slider-change"></a>
          <a href="#slider-image-8" class="slider-change"></a>
          <a href="#slider-image-9" class="slider-change"></a>
        </div>
    </div>
</body>
</html>

样式表：

    @charset "utf-8";
/* CSS Document */

.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;
        }

        #slider-image-4:target ~ .image-holder
        {
            left: -2400px;
        }

        #slider-image-5:target ~ .image-holder
        {
            left: -3200px;
        }

        #slider-image-6:target ~ .image-holder
        {
            left: -4000px;
        }

        #slider-image-7:target ~ .image-holder
        {
            left: -4800px;
        }

        #slider-image-8:target ~ .image-holder
        {
            left: -5600px;
        }

        #slider-image-9:target ~ .image-holder
        {
            left: -6400px;
        }

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

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

我只想知道如何将图像放在正确的位置，从页面隐藏，直到滑块到达它们。如果它更容易并且有人可以提供工作代码而不是修复此代码，那将非常感激。

Answer 1

尝试将此代码添加到主div中，它可以更好地处理800x400图像：

<div class="slider-holder">

破碎的图像滑块

1 个答案: