JavaScript 切换图片

最新推荐文章于 2024-06-27 12:49:37 发布

会过敏的企鹅

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量301

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_43623306/article/details/90812107

前端专栏收录该内容

28 篇文章

订阅专栏

JavaScript 切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <style>
        .box {
            /* border: 3px solid red; */
            /* width: 500px; */
            width: 500px;
            margin: 0px auto;
            position: relative;

            overflow: hidden;
        }
        .container {
            /* width: calc(500px*2); */
            width: 200%;
            overflow: hidden;

            /* position: relative;
            left: -500px; */

            transition: transform 1s;
            /* transform: translateX(-500px); */
        }
        .container img {
            width: 50%;
            float: left;
        }
        .btn-group {
            position: absolute;
            bottom: 10px;
            background: red;
            left: 0;
            right: 0;

            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="container">
            <img src="img/01.jpg" alt="">
            <img src="img/02.jpg" alt="">

        </div>

        <div class="btn-group">
            <button type="button">按钮1</button>
            <button type="button">按钮2</button>
        </div>
    </div>

    <script>
       var btnElements = document.getElementsByClassName("btn-group")[0].getElementsByTagName("button");
        
        console.log(btnElements);
        var container = document.getElementsByClassName("container")[0];

        // 没有单位,获取大小
        var boxWidth = document.getElementsByClassName("box")[0].clientWidth;
        console.log(boxWidth);

        for(var i = 0; i < btnElements.length; i++) {
            // 自定义一个下标
            btnElements[i].index = i;
            btnElements[i].onclick = function(){
                console.log(this.index);
                // 通过this找下标关系
                var offsetValue = this.index * -boxWidth;
                container.style.transform = "translateX("+offsetValue+"px)";
            }
        }
    </script>
</body>
</html>

点击按钮二切换图片