简单轮播图的实现

柔情只为你懂 2023-03-14 08:19 12阅读 0赞

简单轮播图的实现

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

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