JavaScript -WebAPI - 案例 - 轮播图动画函数封装

最新推荐文章于 2022-08-08 11:29:37 发布

Henry_ww

最新推荐文章于 2022-08-08 11:29:37 发布

阅读量135

点赞数

分类专栏： JavaScript 案例文章标签： javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119700980

版权

JavaScript 同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

案例

34 篇文章 4 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript动态生成页码，实现图片轮播功能，包括箭头效果、鼠标移入移出事件、点击切换图片的淡入淡出效果以及自动轮播。通过实例代码展示了如何操作DOM和使用定时器来控制图片切换。

摘要由CSDN通过智能技术生成

1.动态生成页码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /*overflow: hidden;*/
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 500px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;

            border-radius: 50%;
        }

        .all ol li.current {
            background: yellow;
        }


        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <script src="js/fade.js"></script>
    <script>
        window.onload = function () {
            // 从服务器获取数据
            const imgs = ['laugh0,1.gif', 'laugh02.gif', 'laugh03.gif', 'laugh04.gif', 'laugh05.gif', 'laugh43.gif']

            // 需求1: 动态生成页码

            // 1. 拿到相关元素: img , ol, 箭头div, left, right
            const img = document.querySelector('.screen img')
            const ol = document.querySelector('.screen ol')
            const arr = document.querySelector('#arr')
            const left = arr.firstElementChild
            const right = arr.lastElementChild

            // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
            for (let i = 0; i < imgs.length; i++) {
                // 生成li,放到ol中
                const li = document.createElement('li')
                // li.innerText = i + 1

                // 注意点: 第一个li特殊
                if (i == 0) li.classList.add('current')

                // 放到ol中
                ol.appendChild(li)
            }



        }
    </script>
</head>

<body>
    <div class="all">
        <div class="screen">
            <ul>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
</body>

</html>

2. 箭头效果 - 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr

 <script src="js/fade.js"></script>
    <script>
        window.onload = function () {
            // 从服务器获取数据
            const imgs = ['laugh01.gif', 'laugh02.gif', 'laugh03.gif', 'laugh04.gif', 'laugh05.gif', 'laugh43.gif']

            // 需求1: 动态生成页码

            // 1. 拿到相关元素: img , ol, 箭头div, left, right
            const img = document.querySelector('.screen img')
            const ol = document.querySelector('.screen ol')
            const arr = document.querySelector('#arr')
            const left = arr.firstElementChild
            const right = arr.lastElementChild
            const all = document.querySelector('.all')

            // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
            for (let i = 0; i < imgs.length; i++) {
                // 生成li,放到ol中
                const li = document.createElement('li')
                // li.innerText = i + 1

                // 注意点: 第一个li特殊
                if (i == 0) li.classList.add('current')

                // 放到ol中
                ol.appendChild(li)
            }

            // 需求2: 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr
            all.onmouseover = function () {
                arr.style.display = 'block'
            }

            all.onmouseout = function () {
                arr.style.display = ''
            }


        }
    </script>

3. 箭头点击效果 - 点击左右按钮, 不断切换图片( 淡入和淡出 ), 记住细节(页面要改变样式)

 <script src="js/fade.js"></script>
        <script>
            window.onload = function () {
                // 从服务器获取数据
                const imgs = ["laugh01.gif", "laugh02.gif", "laugh03.gif", "laugh04.gif", "laugh05.gif", "laugh43.gif"];

                // 需求1: 动态生成页码

                // 1. 拿到相关元素: img , ol, 箭头div, left, right
                const img = document.querySelector(".screen img");
                const ol = document.querySelector(".screen ol");
                const arr = document.querySelector("#arr");
                const left = arr.firstElementChild;
                const right = arr.lastElementChild;
                const all = document.querySelector(".all");

                // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
                for (let i = 0; i < imgs.length; i++) {
                    // 生成li,放到ol中
                    const li = document.createElement("li");
                    // li.innerText = i + 1

                    // 注意点: 第一个li特殊
                    if (i == 0) li.classList.add("current");

                    // 放到ol中
                    ol.appendChild(li);
                }

                // 需求2: 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr
                all.onmouseover = function () {
                    arr.style.display = "block";
                };

                all.onmouseout = function () {
                    arr.style.display = "";
                };

                // 需求3: 点击左右按钮, 不断切换图片( 淡入和淡出 ), 记住细节(页面要改变样式)

                // 需要定义一个变量: 记录当前显示的图片的下标, 默认第一张: 0
                let index = 0;

                // 1. 给right做一个点击事件
                right.onclick = function () {
                    // 1.1 先干掉当前index(图片)对应的页码的 类: current
                    ol.children[index].classList.remove("current");
                    // 1.2 下标++
                    index++;
                    // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到第一个: index = 0
                    if (index == imgs.length) index = 0;
                    // 1.4 先让新的index对应的页码增加类: current
                    ol.children[index].classList.add("current");
                    // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                    fadeTo(img, 0.3, function () {
                        img.src = "images/" + imgs[index];

                        fadeTo(img, 1);
                    });
                };

                // 2. 给left做一个点击事件
                left.onclick = leftClick;

                function leftClick() {
                    // 1.1 先干掉当前index(图片)对应的页码的 类: current
                    ol.children[index].classList.remove("current");
                    // 1.2 下标--
                    index--;
                    // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到最后一个
                    if (index < 0) index = imgs.length - 1;
                    // 1.4 先让新的index对应的页码增加类: current
                    ol.children[index].classList.add("current");
                    // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                    fadeTo(img, 0.3, function () {
                        img.src = "images/" + imgs[index];

                        fadeTo(img, 1);
                    });
                }
            };

            // function a(fn) {
            //     fn()
            // }

            // function b() {

            // }

            // a(b)                // 有名回调
            // a(function () { })     // 匿名回调
        </script>

4. 给页码做点击事件, 本质跟左右点击一样(更方便: 下标不会超出, 点击谁就是谁)

 <script src="js/fade.js"></script>
    <script>
        window.onload = function () {
            // 从服务器获取数据
            const imgs = ['laugh01.gif', 'laugh02.gif', 'laugh03.gif', 'laugh04.gif', 'laugh05.gif', 'laugh43.gif']

            // 需求1: 动态生成页码

            // 1. 拿到相关元素: img , ol, 箭头div, left, right
            const img = document.querySelector('.screen img')
            const ol = document.querySelector('.screen ol')
            const arr = document.querySelector('#arr')
            const left = arr.firstElementChild
            const right = arr.lastElementChild
            const all = document.querySelector('.all')

            // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
            for (let i = 0; i < imgs.length; i++) {
                // 生成li,放到ol中
                const li = document.createElement('li')
                // li.innerText = i + 1

                // 注意点: 第一个li特殊
                if (i == 0) li.classList.add('current')

                // 放到ol中
                ol.appendChild(li)

                // 需求4: 给页码做点击事件, 本质跟左右点击一样(更方便: 下标不会超出, 点击谁就是谁)
                li.onclick = function () {
                    // 1. 安全判定: 当前页面不应该被点击(当前被点击页码的下标为i,当前显示的是index)
                    if (i == index) return
                    // 2. 先干掉index对应的页码
                    ol.children[index].classList.remove('current')
                    // 3. 修改index的值: 当前被点击的li的下标: i
                    index = i
                    // 4. 修改新的index对应的页码
                    ol.children[index].classList.add('current')
                    // 5. 动画效果: 先淡出, 后改图片, 再淡入
                    fadeTo(img, .3, function () {
                        img.src = 'images/' + imgs[index]

                        fadeTo(img, 1)
                    })
                }
            }

            // 需求2: 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr
            all.onmouseover = function () {
                arr.style.display = 'block'
            }

            all.onmouseout = function () {
                arr.style.display = ''
            }

            // 需求3: 点击左右按钮, 不断切换图片( 淡入和淡出 ), 记住细节(页面要改变样式)

            // 需要定义一个变量: 记录当前显示的图片的下标, 默认第一张: 0
            let index = 0

            // 1. 给right做一个点击事件  
            right.onclick = function () {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 1.2 下标++
                index++
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到第一个: index = 0
                if (index == imgs.length) index = 0
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                fadeTo(img, .3, function () {
                    img.src = 'images/' + imgs[index]

                    fadeTo(img, 1)
                })
            }

            // 2. 给left做一个点击事件
            left.onclick = leftClick

            function leftClick() {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 1.2 下标--
                index--
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到最后一个
                if (index < 0) index = imgs.length - 1
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                fadeTo(img, .3, function () {
                    img.src = 'images/' + imgs[index]

                    fadeTo(img, 1)
                })
            }




        }

    </script>

5. 自动轮播

<script src="js/fade.js"></script>
    <script>
        window.onload = function () {
            // 从服务器获取数据
            const imgs = ['laugh01.gif', 'laugh02.gif', 'laugh03.gif', 'laugh04.gif', 'laugh05.gif', 'laugh43.gif']

            // 需求1: 动态生成页码

            // 1. 拿到相关元素: img , ol, 箭头div, left, right
            const img = document.querySelector('.screen img')
            const ol = document.querySelector('.screen ol')
            const arr = document.querySelector('#arr')
            const left = arr.firstElementChild
            const right = arr.lastElementChild
            const all = document.querySelector('.all')

            // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
            for (let i = 0; i < imgs.length; i++) {
                // 生成li,放到ol中
                const li = document.createElement('li')
                // li.innerText = i + 1

                // 注意点: 第一个li特殊
                if (i == 0) li.classList.add('current')

                // 放到ol中
                ol.appendChild(li)

                // 需求4: 给页码做点击事件, 本质跟左右点击一样(更方便: 下标不会超出, 点击谁就是谁)
                li.onclick = function () {
                    // 1. 安全判定: 当前页面不应该被点击(当前被点击页码的下标为i,当前显示的是index)
                    if (i == index) return
                    // 2. 先干掉index对应的页码
                    ol.children[index].classList.remove('current')
                    // 3. 修改index的值: 当前被点击的li的下标: i
                    index = i
                    // 4. 修改新的index对应的页码
                    ol.children[index].classList.add('current')
                    // 5. 动画效果: 先淡出, 后改图片, 再淡入
                    fadeTo(img, .3, function () {
                        img.src = 'images/' + imgs[index]

                        fadeTo(img, 1)
                    })
                }
            }

            // 需求5: 自动轮播
            // 知识点补充
            // 右点击事件: right.onclick = function(){}
            // 代码触发右点击事件: right.click()

            // 增加一个定时器: 间隔时间后, 触发向右的点击事件
            let timeId = setInterval(function () {
                right.click()
            }, 2000)

            // 需求2: 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr
            all.onmouseover = function () {
                arr.style.display = 'block'
                // 清除定时器: 不要自动轮播
                clearInterval(timeId)
            }

            all.onmouseout = function () {
                arr.style.display = ''
                // 恢复自动轮播
                timeId = setInterval(function () {
                    right.click()
                }, 2000)
            }

            // 需求3: 点击左右按钮, 不断切换图片( 淡入和淡出 ), 记住细节(页面要改变样式)

            // 需要定义一个变量: 记录当前显示的图片的下标, 默认第一张: 0
            let index = 0

            // 1. 给right做一个点击事件  
            right.onclick = function () {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 1.2 下标++
                index++
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到第一个: index = 0
                if (index == imgs.length) index = 0
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                fadeTo(img, .3, function () {
                    img.src = 'images/' + imgs[index]

                    fadeTo(img, 1)
                })
            }

            // 2. 给left做一个点击事件
            left.onclick = leftClick

            function leftClick() {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 1.2 下标--
                index--
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到最后一个
                if (index < 0) index = imgs.length - 1
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 图片淡出到0.3, 然后再修改图片,再淡入
                fadeTo(img, .3, function () {
                    img.src = 'images/' + imgs[index]

                    fadeTo(img, 1)
                })
            }

        }

    </script>

优化版轮播图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /*overflow: hidden;*/
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 500px;
        }

        .screen ul li {
            position: absolute;
            left: 0;
            top: 0;

            opacity: 0;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;

            border-radius: 50%;
        }

        .all ol li.current {
            background: yellow;
        }


        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <script src="js/fade.js"></script>
    <script>
        window.onload = function () {
            // 从服务器获取数据
            const imgs = ['laugh01.gif', 'laugh02.gif', 'laugh03.gif', 'laugh04.gif', 'laugh05.gif', 'laugh43.gif']

            // 需求1: 动态生成页码

            // 1. 拿到相关元素: img , ol, 箭头div, left, right
            const img = document.querySelector('.screen img')
            const ol = document.querySelector('.screen ol')
            const arr = document.querySelector('#arr')
            const left = arr.firstElementChild
            const right = arr.lastElementChild
            const all = document.querySelector('.all')
            const ul = document.querySelector('.screen ul')



            // 2. 循环遍历数组(根据数组长度生成): 产生li, 放到ol中(注意:默认第一张是选中的: 类名current)
            for (let i = 0; i < imgs.length; i++) {
                // 生成li,放到ol中
                const li = document.createElement('li')
                // li.innerText = i + 1

                // 注意点: 第一个li特殊
                if (i == 0) li.classList.add('current')

                // 放到ol中
                ol.appendChild(li)

                // 需求4: 给页码做点击事件, 本质跟左右点击一样(更方便: 下标不会超出, 点击谁就是谁)
                li.onclick = function () {
                    // 1. 安全判定: 当前页面不应该被点击(当前被点击页码的下标为i,当前显示的是index)
                    if (i == index) return
                    console.log(index)
                    // 2. 先干掉index对应的页码
                    ol.children[index].classList.remove('current')
                    // 当前图片淡出为0
                    fadeTo(ul.children[index], 0)
                    // 3. 修改index的值: 当前被点击的li的下标: i
                    index = i
                    // 4. 修改新的index对应的页码
                    ol.children[index].classList.add('current')
                    // 5. 新图片淡入为1
                    fadeTo(ul.children[index], 1)
                    console.log(index)
                }

                // 生成ul下的li图片
                ul.innerHTML += ` <li><img src="images/${imgs[i]}" width="500" height="200" /></li>`
            }

            ul.children[0].style.opacity = 1

            // 需求2: 给整个盒子做鼠标的移出和移出事件: 移入显示箭头arr,移出隐藏箭头arr
            all.onmouseover = function () {
                arr.style.display = 'block'
                // 清理定时器
                clearInterval(timeId)
            }

            all.onmouseout = function () {
                arr.style.display = ''
                // 重新开启定时器
                timeId = setInterval(function () {
                    console.log(right.click)
                    right.click()
                }, 2500)
            }

            // 需求3: 点击左右按钮, 不断切换图片( 淡入和淡出 ), 记住细节(页面要改变样式)

            // 需要定义一个变量: 记录当前显示的图片的下标, 默认第一张: 0
            let index = 0

            // 1. 给right做一个点击事件  
            right.onclick = function () {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 当前图片淡出为0
                fadeTo(ul.children[index], 0)
                // 1.2 下标++
                index++
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到第一个: index = 0
                if (index == imgs.length) index = 0
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 新图片淡入为1
                fadeTo(ul.children[index], 1)
            }

            // 2. 给left做一个点击事件
            left.onclick = leftClick

            function leftClick() {
                // 1.1 先干掉当前index(图片)对应的页码的 类: current
                ol.children[index].classList.remove('current')
                // 当前图片淡出为0
                fadeTo(ul.children[index], 0)
                // 1.2 下标--
                index--
                // 1.3 安全处理: 不能超出数组的长度: 如果超出, 回到最后一个
                if (index < 0) index = imgs.length - 1
                // 1.4 先让新的index对应的页码增加类: current
                ol.children[index].classList.add('current')
                // 1.5 新图片淡入为1
                fadeTo(ul.children[index], 1)
            }

            let timeId = setInterval(function () {
                console.log(right.click)
                right.click()
            }, 2500)


        }

    </script>
</head>

<body>
    <div class="all">
        <div class="screen">
            <ul>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
</body>

</html>