轮播图/window.onload(解决js结构在html的上面：如何保证js能拿到下面的元素)

最新推荐文章于 2022-07-14 20:27:57 发布

喵帕斯_喵太

最新推荐文章于 2022-07-14 20:27:57 发布

阅读量200

点赞数

分类专栏： javascript 文章标签： HTML5 CSS3 JavaScript 轮播图交互设计

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116209762

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-轮播图

<!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; */
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

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

        .all ol li:hover {
            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>
        const images = ["images/laugh01.gif", "images/laugh02.gif", "images/laugh03.gif", "images/laugh04.gif", "images/laugh05.gif", "images/laugh43.gif"]

        // js结构在html的上面：如何保证js能拿到下面的元素？加载事件：window.onload
        window.onload = function () {

            // 需求：动态生成页码：放到ol中

            // 1. 获取父元素：ol
            let ol = document.querySelector('.all ol')

            // 2. 知道数组的长度：循环实现效果
            for (let i = 0; i < images.length; i++) {
                // 3. 动态生成li：li要做事件，document.createElement()
                let li = document.createElement('li')

                // li.innerText = i + 1
                // 4. 将li添加到ol中
                ol.appendChild(li)

                // 需求：给所有页码增加点击事件

                // 事件处理
                li.onclick = function () {
                    // 是否图片点的就是自己：自己不用处理
                    if (index == i) return

                    // 1. 把原来的页码干掉选中效果
                    ol.children[index].classList.remove('current')
                    // 2. 修改的index的值：就是i
                    index = i
                    // 3. 动画效果换图：先淡出，后切换，再淡入，最后换页码
                    let img = all.querySelector('img')

                    fadeTo(img, .4, function () {
                        // 改图
                        img.src = images[index]

                        // 淡入
                        fadeTo(img, 1)

                        // 页码
                        ol.children[index].classList.add('current')
                    })
                }

            }

            // 给第一个孩子加上类：第一张图片默认被选中
            ol.firstElementChild.classList.add('current')

            // 需求：自动轮播，鼠标移入停止，移出继续

            // 1. 定时器：自动触发rightClick
            let timeId = setInterval(rightClick, 3000)
            /* let timeId = setInterval(function () {
                arr.lastElementChild.click()
                // 元素.onclick = function(){}  // 绑定事件
                // 元素.click()                 // 触发点击事件（代码触发）
            }, 3000) */

            // 2. 修改鼠标移入事件：结束自动轮播
            // 3. 修改鼠标移出事件：继续自动轮播

            // 需求：鼠标移入，显示箭头；鼠标移出隐藏

            // 1. 获取大盒子：all
            // * 操作的是#arr
            let all = document.querySelector('.all')
            let arr = all.lastElementChild
            // 2. 鼠标移入事件
            all.onmouseover = function () {
                arr.style.display = 'block'
                // 2. 修改鼠标移入事件：结束自动轮播
                clearInterval(timeId)
            }
            // 3. 鼠标移出事件
            all.onmouseout = function () {
                arr.style.display = ''
                // 3. 修改鼠标移出事件：继续自动轮播
                timeId = setInterval(rightClick, 3000)
            }

            // 需求：点击向右的箭头，实现图片的淡入与淡出

            // 1. 引入js文件：fade.js
            // 2. 定义一个变量：记录当前被现实的图片的下标，默认是第一张：index = 0
            let index = 0
            // 3. 给向右的按钮做点击事件：有名函数  onclick = function(){}  onclick = myClick
            arr.lastElementChild.onclick = rightClick

            function rightClick() {
                // 取消点击效果
                arr.lastElementChild.onclick = null

                // 3.1 先将当前index（当前图片）对应的页面的样式：类干掉
                ol.children[index].classList.remove('current')
                // 3.2 index+1代表下一张图片
                index++
                // 3.3 安全：index的值 == 数组的长度：index = 0
                if (index == images.length) index = 0
                // 3.4 动画：先淡出0.4，然后改图片，淡入到1，给新的页码加上类
                let img = all.querySelector('img')
                fadeTo(img, .4, function () {
                    // 改图
                    img.src = images[index]

                    // 淡入：增加回调，目的是重新为右点击增加点击事件
                    fadeTo(img, 1, function () {
                        arr.lastElementChild.onclick = rightClick
                    })

                    // 页码
                    ol.children[index].classList.add('current')
                })
            }

            // 需求：点击向左按钮，切换到左边的图片

            // 1. 给向左的按钮添加点击事件：#left
            arr.firstElementChild.onclick = leftClick

            // 2. 事件处理
            function leftClick() {
                // 清除点击事件
                arr.firstElementChild.onclick = null

                // 2.1 清理页码的特殊效果
                ol.children[index].classList.remove('current')
                // 2.2 index-1看左边的图片
                index--
                // 2.3 安全处理：index不能小于0，小于0：等于最后一张图images.length - 1
                if (index < 0) index = images.length - 1
                // 2.4 动画：先淡出，后切换图片，再淡入，增加页码
                let img = all.querySelector('img')
                fadeTo(img, .4, function () {
                    // 改图
                    img.src = images[index]

                    // 淡入：增加回调，等动画执行全部结束，重新提供点击事件
                    fadeTo(img, 1, function () {
                        arr.firstElementChild.onclick = leftClick
                    })

                    // 页码
                    ol.children[index].classList.add('current')
                })
            }





        }
    </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>

js文件：

// 透明函数
// 参数1：元素对象：ele
// 参数2：目标值：target
// 参数3：回调函数：连续动画，fn

function fadeTo(ele, target, fn) {
    // 1. 先清理动画效果
    clearInterval(ele.timeId)
    // 2. 开始定时器
    ele.timeId = setInterval(function () {
        // 3. 拿到元素原来的透明度：小数parseFloat
        let current = parseFloat(getComputedStyle(ele).opacity)
        // console.log(current)
        // 4. 计算步长：(目标 - 当前) * 0.1
        let step = (target - current) * 0.1
        // console.log(step)    // 小数没有办法取整（要么是0，要么1）
        // * 其他步骤
        // 4.1 放大100倍
        step *= 100
        // 4.2 取整：安全判定
        if (step > 0) step = Math.ceil(step)
        else step = Math.floor(step)

        // console.log(step)
        // 5. 修改元素的透明度
        ele.style.opacity = current + step / 100
        console.log(current, step);
        // 6. 结束（判定）：透明度达到目标
        if (step == 0) {
            clearInterval(ele.timeId)

            // 回调函数
            if (typeof fn == 'function') fn()
        }
    }, 10)
}