首页 > 解决方案 > 为什么我的图像滑块不能在 Javascript 中使用,但可以使用 CSS 作为属性

问题描述

为什么这个滑动不起作用我无法理解。当我translateX(-100%)用 Javascript 点击 div(nex) 时,

transform:translateX(-100%) 但是当我在 CSS 中使用这个属性时它可以工作。

我不明白为什么这不起作用

请详细给出适当的解释,并让我知道您是如何做到的。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.holder {
    position: relative;
}

img {
    min-width: 100%;
    height: 500px;

}

.slider {
    width: 80%;
    margin: 20px auto;
    display: inline-flex;
    overflow: hidden;
    position: relative;
}

h1 {
    color: white;
}

.pre {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
}

.nex {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styler.css">
    <title>Document</title>
</head>

<body>

    <div class="slider">
        <img id="images" src="https://www.howtogeek.com/wp-content/uploads/2019/12/GG-Banner.jpg?height=200p&trim=2,2,2,2" alt="">
        <img id="images" src="data:image/jpeg;base64,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" alt="">
        <img id="images" src="data:image/jpeg;base64,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" alt="">
        <div class="pre">
            <h1>
                <</h1>
        </div>

        <div class="nex">
            <h1>></h1>
        </div>
    </div>
</body>
<script>
    var next = document.querySelector('.nex');
    var previous = document.querySelector('.pre');

    next.onclick = () => {

        document.getElementById("images").style.transform = "translateX(-100%)";

    }
</script>

</html>

标签: htmlcssflexbox

解决方案


推荐阅读