简单轮播图的实现

最新推荐文章于 2024-04-08 16:26:29 发布

疯狂平头哥前端乐园

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量2.1k

点赞数 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>

疯狂平头哥前端乐园

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
1
评论
简单轮播图的实现

简单轮播图的实现#简单轮播图的实现的思路所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。其实轮播图就是一个ul列表中的每一个li浮动成一行，将超过盒子的部分隐藏。痛过点击数字按钮使整体的ul列表向左右侧移动，视觉是感受不到整体的ul列表移动只能感受到某一张图片移动。主要问题是：移动的距离其实就是盒子的大小*（数字按钮数字大小-1），因为是向左移动所以是负数所以向左侧移动的距离target=-盒子的大小*（数字按钮数字大小-1）。值得注意的是要将每个数字添加自己的
复制链接

扫一扫