轮播图JS Javascript +html +css

橧易灬

已于 2022-01-18 17:55:12 修改

阅读量628

点赞数

分类专栏： JavaScript HTML笔记文章标签： css html javascript

于 2022-01-18 17:05:00 首次发布

本文链接：https://blog.csdn.net/weixin_56667794/article/details/122563775

版权

轮播图JS Javascript +html +css 附详细代码注释

1 html,css
2 动态生成页面函数
3, 定义函数程序动态生成轮播图页面
4, 自动轮播函数
5, 鼠标移入移出
6, 点击事件
7, 浏览器最小化隐藏
详细代码
- 主体代码
- move运动函数

1 html,css

            只需要一个 空标签 定义好css样式
            所有需要的轮播图标签 都可以 动态生成
            根据需求 动态生成 轮播图 页面内容

2 动态生成页面函数

            1,  定义一个数组 模拟 后端传参数据
            2,  获取 生成轮播图的html标签

3, 定义函数程序动态生成轮播图页面

                (1) 创建 ul ol div 标签节点 
                (2) 设定 ul ol div 标签节点内容
                    ul>li>img

                    ol>li
                        第一个li有class,active样式 也就是背景颜色是红色
                        每一个li定义name属性用于事件委托区分标签
                        每一个li定义num属性存储索引下标

                    div内容是固定内容
                        左 右 切换按钮 
                            添加name用于事件委托
                (3) 将 ul ol div 标签节点 写入 轮播图标签对象中
                (4) 获取 原始的ul>li 原始的ol>li 
                    获取 ul>li 标签宽度
                (5) 克隆 原始ul>li 第一个 和 最后一个
                    克隆 原始ul>li 第一个 写入 ul标签 最后
                    克隆 原始ul>li 最后一个 写入 ul标签 起始
                (6) 重新设定 ul标签宽度 是 克隆之后 li标签个数 * li标签宽度
                    重新设定 ul标签定位 向左 定位 一个li宽度

4, 自动轮播函数

                设定一个定时器 每间隔一段时间 触发执行程序
                    index变量累加1 

                    设定 焦点标签样式 
                        清除所有的ol>li标签的 class,active
                        给 当前显示的ul>li 对应的 ol>li 标签 添加class,active
                            显示最后一个ul>li 给 第一个 ol>li 添加样式
                            显示第一个ul>il 给 最后一个 ol>li 添加样式
                            其他情况 index - 1 是 ul>li 对应的 ol>li

                    调用move()运动函数 根据新的index 运动完成ul标签的定位切换
                        move()定时器的回调函数 
                            如果 当前显示 ul>li 的 最后一个 
                                ul定位瞬间切换到 第二个ul.li
                            如果 当前显示 ul>li 的 第一个 
                                ul定位瞬间切换到 倒数第二个ul.li

                            变量赋值 true 可以再次调用move()运动函数

                外层定时器的时间间隔 必须要 大于 内层定时器move() 执行的时间

5, 鼠标移入移出

                给 轮播图div 添加 事件 
                    鼠标移入 enter
                        清除定时器

                    鼠标移出 leave
                        再次调用 自动轮播函数

6, 点击事件

                给 轮播图div 添加 点击事件 
                    点击 左切换
                        先 防止点击过快 
                            判断变量储存是不是原始值 
                                是 原始值 赋值 false
                                不是 原始值 执行 return
                                
                        显示上一个ul>li 也就是 index 累减 1 
                            index-- 

                        设定 焦点按钮样式

                        调用move()运动函数 动态完成ul标签定位切换

                    点击 右切换
                        先 防止点击过快 
                            判断变量储存是不是原始值 
                                是 原始值 赋值 false
                                不是 原始值 执行 return
                                
                        显示下一个ul>li 也就是 index 累加1
                            index++

                        设定 焦点按钮样式

                        调用move()运动函数 动态完成ul标签定位切换

                    点击 焦点按钮
                        先 防止点击过快 
                            判断变量储存是不是原始值 
                                是 原始值 赋值 false
                                不是 原始值 执行 return
                                
                        显示 点击的 ol>li 对应的 ul>li
                            获取 点击的 ol>li 标签 num属性的属性值
                            也就是 ol>li 标签的索引下标 
                            ol>li 标签的索引下标 获取结果 转化为数值类型 
                            + 1 是 对应的 ul>li 的索引下标
                                index = num属性值转化为数值类型 + 1

                        设定 焦点按钮样式

                        调用move()运动函数 动态完成ul标签定位切换

7, 浏览器最小化隐藏

                给 document 添加 浏览器显示状态监听事件 visibilitychange

                    通过 浏览器显示状态码 判断 浏览器当前的显示状态 
                        如果 visibilityState 是 hidden 
                            表示 浏览器 当期显示状态是 隐藏最小化
                            清除 定时器 

                        如果 visibilityState 是 visible
                            表示 浏览器 当期显示状态是 显示状态
                            再次调用自动轮播函数

详细代码

主体代码

<!DOCTYPE html>
<html lang="en">
<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> 
        *{
     
            margin: 0;
            padding: 0;
        }

        ul,ol,li{
     
            list-style: none;
        }

        img{
     
            display: block;
            width: 100%;
            height:100%;
        }

        a,a:hover,a:active{
     
            text-decoration: none;
        }

        .banner{
     
            width: 600px;
            height: 400px;
            border: 3px solid #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden; 
        }

        .banner ul{
     
            width: 500%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .banner ul::after{
     
            display: block;
            content: "";
            clear: both;
        }

        .banner ul li{
     
            width: 600px;
            height: 400px;
            float: left;
        }

        .banner ol{
     
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.5);
            padding: 5px;
            border-radius: 10px;
        }

        .banner ol li{
     
            w

最低0.47元/天解锁文章

橧易灬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图JS Javascript +html +css

轮播图JS Javascript +html +css 附详细代码注释1 html,css2 动态生成页面函数3, 定义函数程序动态生成轮播图页面4, 自动轮播函数5, 鼠标移入移出6, 点击事件7, 浏览器最小化隐藏详细代码主体代码move运动函数1 html,css 只需要一个空标签定义好css样式所有需要的轮播图标签都可以动态生成根据需求动态生成轮播图页面内容2 动态生成页面函数
复制链接

扫一扫