移动端的轮播图

最新推荐文章于 2024-02-25 10:04:50 发布

「已注销」

最新推荐文章于 2024-02-25 10:04:50 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_41588302/article/details/108488757

版权

移动端轮播图有两种方法，
1.第一种用图片盒子的left值来控制
2.第二种用transform中的translateX来改变translateX只是让盒子在原来位置上移动多少距离，不会改变盒子的left值，而且，每次移动都是从原始的left值开始移动，不会从当前位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            border: 1px solid red;
            height: 400px;
            /* width: 2000px; */
        }

        ul {
            /* 百分比永远是和父亲相对的 */
            position: relative;
            width: 500%;
            /* 手机刷新问题 */
            left: -100%;
            /* left: 300px; */
            overflow: hidden;
        }

        li {
            width: 20%;
            list-style: none;
            float: left;
            height: 200px;
        }

        li img {
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        window.onload = function () {
            var ul = document.querySelector('ul');
            var li = document.querySelector('li');
            var index = 0;
            setInterval(function () {
                index++;
                // console.log(index);
                ul.style.transition = 'all .3s';
                // ul.style.left的起始位置应该是- li.offsetWidth
                ul.style.left = - li.offsetWidth - index * li.offsetWidth + 'px';
                // ul.style.transform = 'translateX(' + -index * li.offsetWidth + 'px)';
            }, 2000);
            ul.addEventListener('transitionend', function () {
                console.log(index);
                if (index == 3) {
                    ul.style.transition = 'none';
                    index = 0;
                    // console.log(index);
                    // translate 在元素原位置上移动，不是新的位置
                    // ul.style.transform = 'translateX(' + -index * li.offsetWidth + 'px)';
                    // translate并没有改变left的值
                    ul.style.left = -li.offsetWidth + 'px';
                }
            });
        }
    </script>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="zxc4.jpg" alt="">
            </li>
            <li>
                <img src="zxc1.jpg" alt="">
            </li>
            <li>
                <img src="zxc2.jpg" alt="">
            </li>
            <li>
                <img src="zxc4.jpg" alt="">
            </li>
            <li>
                <img src="zxc1.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

「已注销」

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端的轮播图

移动端轮播图有两种方法，1.第一种用图片盒子的left值来控制2.第二种用transform中的translateX来改变translateX只是让盒子在原来位置上移动多少距离，不会改变盒子的left值，而且，每次移动都是从原始的left值开始移动，不会从当前位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫