用js实现京东放大缩小轮播图

制作一个简易版的京东放大缩小轮播图
1.布局

<div class="box">
    <div class="child">
        <img src="./image/1.jpg" style="width: 200px; height: 150px; left: 0; bottom: 0;" alt=""/>
        <img src="./image/2.jpg" style="width: 200px; height: 150px; left: 210px; bottom: 0;" alt=""/>
        <img class="centerimg" style="height: 200px;width: 250px;left: 420px; bottom: 0;" src="./image/3.jpg" alt=""/>
        <img src="./image/4.jpg" style="width: 200px; height: 150px;left: 680px; bottom: 0;" alt=""/>
        <img src="./image/5.jpg" style="width: 200px; height: 150px;left: 890px; bottom: 0;" alt=""/>
    </div>
    <button class="btn1">左</button>
    <button class="btn2">右</button>
</div>

2.书写样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 0 auto;
            width: 400px;
            height: 320px;
            border: 1px solid #000;
            overflow: hidden;
        }

        .child {
            position: relative;
            margin-top: 50px;
            left: 50%;
            margin-left: -137%;
            width: 1100px;
            height: 220px;
            font-size: 0;
        }

        .child > img {
            position: absolute;
            transition: width .5s linear, height .5s linear, left .5s linear, bottom .5s linear;
        }

        .child > .centerimg {
            height: 200px;
            width: 250px;
        }

        .btn1 {
            float: left;
        }

        .btn2 {
            float: right;
        }
    </style>

3.js实现轮播

<script>
    /*
     *
     * */
    var leftbtn = document.querySelector(".btn1");
    var rightbtn = document.querySelector(".btn2");
    var imagelist = document.querySelector(".child").children;
    leftbtn.onclick = function (e) {
        if (e.detail == 1) {//控制点击1次
            /*
            * 下面是记录第0张初始的样式
            * */
            var width = imagelist[0].style.width;
            var height = imagelist[0].style.height;
            var left = imagelist[0].style.left;
            var bottom = imagelist[0].style.bottom;
            //先找属性值为
            for (var i = 0; i < imagelist.length; i++) {
                if (i < imagelist.length - 1) {
                    imagelist[i].style.width = imagelist[i + 1].style.width;
                    imagelist[i].style.height = imagelist[i + 1].style.height;
                    imagelist[i].style.left = imagelist[i + 1].style.left;
                    imagelist[i].style.bottom = imagelist[i + 1].style.bottom;
                }
                else {
                    imagelist[i].style.width = width;
                    imagelist[i].style.height = height;
                    imagelist[i].style.left = left;
                    imagelist[i].style.bottom = bottom;
                }
                /*
                * 点击左边   最右边第一张到左边第一张位置    会看到一张飞过去了
                * */
                if (parseInt(imagelist[i].style.left) == 0) {
                    imagelist[i].style.opacity = 0;
                    (function (n) {
                        setTimeout(function () {
                            imagelist[n].style.opacity = 1;
                            n = null;
                        }, 500);
                    })(i);
                }
            }
        }
    }
    rightbtn.onclick = function (e) {
        if (e.detail == 1) {
            var width = imagelist[4].style.width;
            var height = imagelist[4].style.height;
            var left = imagelist[4].style.left;
            var bottom = imagelist[4].style.bottom;
            //先找属性值为
            for (var i = imagelist.length - 1; i >= 0; i--) {
                if (parseInt(imagelist[i].style.left) == 0) {
                    imagelist[i].style.opacity = 0;
                    (function (n) {
                        setTimeout(function () {
                            imagelist[n].style.opacity = 1;
                            n = null;
                        }, 500);
                    })(i);
                }
                if (i > 0) {
                    imagelist[i].style.width = imagelist[i - 1].style.width;
                    imagelist[i].style.height = imagelist[i - 1].style.height;
                    imagelist[i].style.left = imagelist[i - 1].style.left;
                    imagelist[i].style.bottom = imagelist[i - 1].style.bottom;
                }
                else {
                    imagelist[i].style.width = width;
                    imagelist[i].style.height = height;
                    imagelist[i].style.left = left;
                    imagelist[i].style.bottom = bottom;
                }

            }
        }
    }
</script>

4.效果如下