一，随机点名器训练

1，任务概述

为了活跃班级气氛，在班级上张老师想通过一个随机点名器来随机抽取学员回答问题，故按排你来使用 HTML+JavaScript 来实现如下图所示的随机点名器；

第一张图是随机点名器的初始页面；
当点击开始按钮时，JS 程序中提前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示；
当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。

点击并拖拽以移动

2，任务过程

1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。
2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。
3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。
4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信息，最后完成输出

3，可能遇到的问题

1、随机姓名信息的抽取
2、定时器函数的的使用
3、开始与停止的切换操作

4，任务线索

JavaScript、循环、随机和定时器函数的使用。

手册：www.w3school.com.cn/js/index.as…

学习视频

5，参考代码

5.1 运行效果

点击并拖拽以移动

5.2 编程思路

三个div元素：container（最大的框）、name（显示选中的名字）、switch（开关）；
通过flag确定当前点名器所处状态；
通过changeState函数，更换状态，调整开关按钮的样式；

5.3 参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <style>
        #container{
            /* 定位 */
            position: relative;/* 生成相对定位的元素，相对于其正常位置进行定位 */
            left: 450px;
            top: 200px;
            /* 尺寸 */
            width: 400px;
            height: 250px;
            /* 边框 */
            background-color: rgb(230, 99, 51);
            border-radius: 10px;/* 圆角边框 */
            box-shadow:5px 5px 3px grey;/* 阴影 */
        }
        #name{
            /* 定位 */
            position: absolute;/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 */
            left: 50px;
            top: 80px;
            /* 尺寸 */
            width: 300px;
            height: 60px;
            /* 边框设置 */
            background-color: #b9e9f0;
            border-radius: 10px;
            box-shadow:3px 3px 3px grey;/* 阴影 */
            outline-style: none;
            /* 文字设置 */
            text-align: center;/* 文字水平居中 */
            line-height: 60px;/* 将文字行高设置为文字外层元素的高度大小 从而文本垂直居中 */
            font-size: 30px;
            font-weight: bold;
        }
        #switch{
            /* 定位 */
            position: absolute;
            left: 175px;
            top: 185px;
            /* 尺寸 */
            width: 50px;
            height: 25px;
            /* 边框 */
            background-color: green;
            border-radius: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: blanchedalmond;
            box-shadow:1px 1px 3px gray;/* 阴影 */
            /* 文字 */
            text-align: center;/* 文本水平居中 */
            line-height: 25px;/* 文本垂直居中 */
            font-family:"Times New Roman",Georgia,Serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container" >
        <div id="name">
            点名器
        </div>
        <div id="switch" onclick="changeState()">
            开始
        </div>
    </div>
</body>
<script>
    var list = ["花木兰", "凯", "孙悟空", "李白", "张良", "钟馗"];// 备选名单
    var mytime = null;      // 定时器
    var flag = 0;           // 状态标志 0：停止，1：运行中
    var index = -1;         // 记录当前遍历的下标
    function changeState() {
        var button = document.getElementById("switch");
        if(flag == 0) {
            flag = 1;
            button.style.backgroundColor = 'red';
            button.style.outlineStyle = 'solid';
            button.style.outlineColor = 'blue';
            button.style.outlineWidth = '2px';
            button.childNodes[0].nodeValue = "暂停";
            var name = document.getElementById("name");
            mytime = setInterval(function(){    // 设置定时器效果
                index++;
                index = index % list.length;
                name.childNodes[0].nodeValue = list[index];
            }, 100);
        }else{
            flag = 0;
            clearTimeout(mytime);               // 清除定时器效果
            button.style.backgroundColor = 'green';
            button.style.outlineStyle = 'none';
            button.childNodes[0].nodeValue = "开始";
        }
    }
</script>
</html>
复制代码

点击并拖拽以移动

二，轮播图效果训练

1，任务概述

如下图所示，本次训练目标是完成京东官网首页中轮播图效果。具体要求：

要求每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放，鼠标移出则会继续。
如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示。

具体效果参考网址：www.jd.com/

点击并拖拽以移动

2，任务过程

使用 HTML+CSS 布局出如上图所示页面效果。
嵌入 JS 代码，定时轮换显示图片。
添加鼠标移入移出事件，完成暂停和继续轮换效果。
为左右按钮添加点击事件，完成手动轮换商品图片效果展示。
完成左下角圆点点击轮换商品图片展示

3，可能遇到的问题

定时事件的使用
鼠标移入和移出事件的完成滚动效果的暂停和继续
由自动到手工轮换效果的切换。

4，任务线索

JavaScript 语言基础、鼠标事件和定时器函数的使用。

手册：www.w3school.com.cn/js/index.as…

视频：JavaScript 事件处理系列视频。

5，参考代码

参考教程@哔哩哔哩【由浅入深带你解剖JS轮播图原理】

5.1 运行效果

点击并拖拽以移动

5.2 编程思路

一个大的div元素表示最外层的框，中间填充将要展示的图片，图片大小和外框的大小相匹配；
图片横向排列，但是同时只显示一张图片，其余图片隐藏起来，通过修改margin-left来显示其他图片；
通过绝对定位，设计小圆点大体样式；
设计changeImg和changeIcon函数，表示更改下标index后图片和小圆点的样式变化；
设计show函数展示图片和图标；
通过doStart函数控制鼠标移出图片后，自动轮播图片和小圆点；
通过给小圆点添加onmouseover函数locate，并传入不同的index实现小圆点和图片的绑定；
利用字体图标设计左右移动图片的功能；

5.3 参考代码

提示：展示框的大小、图片、字体图标需要自己进行配置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图设计</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;       /* 消除列表的原点 */
            text-decoration: none;  /* 消除链接下划线 */
        }
        /* 整体展示框架的样式 */
        #container{
            width: 386px;
            height: 260px;
            left: 500px;
            top: 200px;
            overflow: hidden;       /* 超出部分选择隐藏 */
            border: 0.5px solid gray;/* 边框设置为黑色 */
            position: relative;     /* 框架采用相对定位 */
        }
        /* 图片列表的样式 */
        #imgList{
            width: 1930px;          /* 所有图片累计的宽度386 * 5 */
            height: 260px;
        }
        /* 单个图标的样式 */
        #imgList li{
            float: left;            /* 浮动靠左排列 */
            transition: opacity 300ms ease-in-out 0.5s;
            transition-duration: 0.5s;/* 过渡动画 但是好像没有起作用 应该是没有定义过渡后的效果*/
        }
        /* 下方小圆点图标列表样式 */
        #iconList{
            position: absolute;     /* 绝对定位 */
            width: 75px;            /* 设定整体规格、位置 */
            height: 10px;
            left: 20px;
            bottom: 10px;
        }
        /* 小图标的定位 */
        #iconList li{
            position: relative;
            float: left;
            margin-left: 5px;       /* 扩大圆点间距 */
            width: 10px;
            height: 10px;
            cursor: pointer;        /* 将鼠标图形变成小手样式 */
            border-radius: 50%;     /* 设置为圆形 */
            background-color:white;
            opacity: 0.75;          /* 透明度 */
            top: 2px;               /* 普通小圆点距顶端距离 为了使选中小圆点添加边框后仍然保持对齐 */
        }
        /* 字体图标实现左右移动图片的功能 */
        @font-face {
            font-family: 'fontello';
            src: url('./font/fontello.eot?33765623');
            src: url('./font/fontello.eot?33765623#iefix') format('embedded-opentype'),
                url('./font/fontello.woff?33765623') format('woff'),
                url('./font/fontello.ttf?33765623') format('truetype'),
                url('./font/fontello.svg?33765623#fontello') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        /* 设置字体图标的整体样式 */
        .icon{
            font-family: 'fontello';
            color: white;
        }
        /* 左边字体图标的样式 */
        #iconLeft{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            left: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            line-height: 30px;      /* 保证字体图标上下居中 */
            text-align: left;       /* 靠左 */
        }
        /* 右边字体图标的样式 */
        #iconRight{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            right: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 30px;
            text-align: right;      /* 靠右 */
        }
    </style>
</head>
<body>
    <div id="container" >
        <!-- 由于展示图片后index立刻加一 为了显示上一张图片 这里需要减二 -->
        <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div>
        <!-- 由于展示图片后index立刻加一 为了显示下一张图片 这里不需要更改 -->
        <div class="icon" id="iconRight" onclick="doStart()"></div>
        
        <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()">
            <li><a href=""><img src="https://juejin.cn/post/images/17.jpg" ></a></li>
            <li><a href=""><img src="https://juejin.cn/post/images/18.jpg" ></a></li>
            <li><a href=""><img src="https://juejin.cn/post/images/19.jpg" ></a></li>
            <li><a href=""><img src="https://juejin.cn/post/images/20.jpg" ></a></li>
        </ul>

        <ul id="iconList">
            <li onmouseover="locate(0)"></li>
            <li onmouseover="locate(1)"></li>
            <li onmouseover="locate(2)"></li>
            <li onmouseover="locate(3)"></li>
        </ul>
        
    </div>
    <script>
        // 初始化图片位置
        var index = 0;
        // 获取图片标签
        var imgs = document.getElementById("imgList").getElementsByTagName("li");
        // 获取图标列表 并设置第一个被选中图标的样式
        var icons = document.getElementById("iconList").getElementsByTagName("li");
        // 设置定时器
        var timer;
        // 开始轮播
        doStart();
        // 展示图片和小图标
        function show(){
            index = (index + imgs.length) % imgs.length;// 保证不越界
            changeImg();
            changeIcon(index)
            index++;                    // 下标自增
        }
        // 启动定时轮播
        function doStart(){
            show();                     // 先执行一次
            if(timer != null){
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(show,3000);
        }
        // 暂停定时轮播
        function doStop(){
            clearInterval(timer);
            // 由于展示完当前图片后index立即加一,若鼠标悬停在图片上之后移开，会立刻显示第二张图片，所以减一
            // 为了避免index出现负数，进行取模运算
            index = (index - 1 + imgs.length) % imgs.length;
        }
        // 根据index 通过修改marginLeft展示不同图片
        function changeImg(){
            if(index == 0){
                document.getElementById("imgList").style.marginLeft = "0px";
            }else{
                document.getElementById("imgList").style.marginLeft = -index * 386+"px";
            }
        }
        // 根据index 修改当前位置的圆点样式
        function changeIcon(x){
            for(var i = 0; i < imgs.length; i++){
                if(i == x){
                    icons[i].style.border="2px solid gray"
                    icons[i].style.borderColor="rgba(128, 128, 128, 0.5)";
                    icons[i].style.top="0px";// 保证居中
                }else{
                    icons[i].style.border="none";
                    icons[i].style.top="2px";// 保证居中
                }
            }
        }
        // 根据选择的圆点来确定图片
        function locate(x){
            index = (x + imgs.length) % imgs.length;
            doStart();
        }
        // 移动图片
        function moveImg(x){
            locate(index+x);
        } 
    </script>
</body>
</html>
复制代码

点击并拖拽以移动