简单轮播图的实现

最新推荐文章于 2021-12-19 08:12:53 发布

疯狂平头哥前端乐园

最新推荐文章于 2021-12-19 08:12:53 发布

阅读量2.3k

点赞数 2

分类专栏：程序员必备技能文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/weixin_43862991/article/details/106166481

版权

程序员必备技能专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单轮播图的实现

#简单轮播图的实现的思路

所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。
其实轮播图就是一个ul列表中的每一个li浮动成一行，将超过盒子的部分隐藏。痛过点击数字按钮使整体的ul列表向左右侧移动，视觉是感受不到整体的ul列表移动只能感受到某一张图片移动。
主要问题是：移动的距离其实就是盒子的大小*（数字按钮数字大小-1），因为是向左移动所以是负数所以向左侧移动的距离target=-盒子的大小*（数字按钮数字大小-1）。值得注意的是要将每个数字添加自己的一个学好属性。是为了更加方便的计算移动距离
下面是实现的代码，可在vscode中实现（注意：需要重新更改图片路径，要不然会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        ul {
            list-style: none
        }
        img {
            vertical-align: top
        }
        .box {
            width: 490px;
            height: 170px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
        }
        .inner {
            width: 490px;
            height: 170px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner li {
            float: left;
        }
        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }
        .square span.current {
            background-color: orangered;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="inner">
            <!-- 轮播图是整个ul整体向左侧移动是负方向 -->
            <ul>
                <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
            </ul>
            <div class="square">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        </div>
    </div>

    <script src="../../animation.js"></script>
    <script>
        // 需求： 点击数字，修改背景颜色，设置类名：current
        // 1. 先获取需要的元素
        let ulBox = document.getElementsByTagName('ul')[0]; //位移元素
        // 计算出盒子的实际宽度，以便获得每次向左侧移动的距离
        let moveWidth = document.getElementsByClassName('inner')[0].offsetWidth;
        let spanArr = document.getElementsByTagName('span'); //这里需要获取的是数组
        // 2. 循环遍历按钮数组，设置点击事件
        for (let i = 0; i < spanArr.length; i++) {
            // 5. 如何知道你所点击的是第几个
            // 将按钮的下标保存按钮身上
            // 给每个按钮设置一个：自定义学号你属性
            spanArr[i].setAttribute('numindex', i);

            spanArr[i].onclick = function () {
                for (let j = 0; j < spanArr.length; j++) {
                    // 3. 排他，将背景颜色 恢复原状
                    spanArr[j].removeAttribute('class');
                }
                // 4. 当前点击的span设置类名：current
                this.setAttribute('class', 'current');
                // 6. 点击让ulBox位移
                // 调用：animation（elm，target）
                // elm----->ulBox
                // target---->索引*movewidth
                // 根据按钮计算位移目标距离
                // 注意ul是向左走，是负数
                let target = -this.getAttribute('numindex') * moveWidth;
                // 7.调用函数
                moveAnimation(ulBox, target);
            }
        }
    </script>
</body>
</html>