Web - JS掌握JavaScript中的数组、循环、函数等技术的使用(网页轮播图)

此博客展示了如何使用HTML、CSS和JavaScript实现一个带有导航圆点和切换按钮的轮播图效果，并结合了一个简单的随机点名器功能。代码虽然略显混乱，但成功实现了页面元素的交互，包括图片的自动切换、手动切换以及导航圆点的高亮显示。此外，还包含了对悬停状态的处理和一些细节调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成网页轮播图效果，配套的还有随机点名器训练。
在这里插入图片描述
代码写得有一些乱，其中有些问题的解决方案也不算好，勉勉强强的自己完成了这个任务训练，0.0~
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图效果训练</title>
    <style>
        /*设置css/css3样式*/
        button{
            display: inline-block;
            position: absolute;
            height: 30px;
            width: 20px;
            border-radius: 10px;
            background-color: rgba(0,0,0,0.2);
            border: none;
            margin-top: 141.5px;
        }
        button:hover{background-color: rgba(0,0,0,0.4);}
        #button1{margin-left: 0px;}
        #button2{margin-left: 480px;}
        
        #did{
            height: 313px;
            width: 500px;
            margin: 10px auto;
            position: relative;
        }
        #did img{
            display: none;
            position: absolute;
            margin: 0px;
            height: 313px;
            width: 500px;
            border-radius: 10px;
        }
        #did img:first-child{display: block;}/*使得第一张图片显示*/

        ul{
            list-style-type: none;
            position: absolute;
            margin-top: 290px;
        }
        li{
            width: 10px;
            height: 10px;
            margin-right: 3px;
            float: left;/*使得li列表排成一行*/
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 50%;/*设置为小圆形*/
        }
        /*下面这一设置被覆盖，不能显示*/
        li:hover{background-color: rgba(255, 255, 255, 1);}

    </style>
</head>
<body>
    <h1 align="center">轮播图效果训练</h1>
    <div id="did" onmouseover="doStop()" onmouseout="doStart()">
        <!--图片-->
        <img src="./1.jpg" alt="">
        <img src="./2.jpg" alt="">
        <img src="./3.jpg" alt="">
        <img src="./4.jpg" alt="">
        <img src="./5.jpg" alt="">
        <!--切换按钮-->
        <button id="button1" onclick="doBefore()"><</button>
        <button id="button2" onclick="doNext()">></button>

        <!--定义圆点导航-->
        <ul id="ul">
            <li onclick="goto(0)"></li>
            <li onclick="goto(1)"></li>
            <li onclick="goto(2)"></li>
            <li onclick="goto(3)"></li>
            <li onclick="goto(4)"></li>
        </ul>
    </div>
</body>
<script>
    //m用于获取当前播放的图片是第几张
    var m = 0,mytime = null;
    //num用于记录当前播放的图片序号
    var num = 0;
    var mlist = document.getElementById('did').getElementsByTagName('img');

    function show(x){//x的范围0-4
        for(var i=0;i<mlist.length;i++){
            if(x == i){
                //记录正在播放的图片序号，doNext()/doBefore()会用到
                num = x;
                proofread(num);//传入当前展示的图片，校对导航显示的小圆点
                mlist[i].style.display = 'block';
            }else{
                mlist[i].style.display = 'none';
            }
        }
    }

    //开启定时/停止轮播图片
    function doStart(){
        if(mytime == null){
            mytime = setInterval(function(){
                m++;
                show(m);
                if(m == mlist.length-1){
                    m = -1;
                }
            }, 3000);
        }
    }
    function doStop(){
        if(mytime != null){
            clearInterval(mytime);
            mytime = null;
        }
    }
    doStart(); //默认启动

    //播放下/上一张图片
    function doNext(){
        if(num == mlist.length-1){
            num = 0;
        }else{
            num++;
        }
        show(num);
    }
    function doBefore(){
        if(num == 0){
            num = mlist.length-1;
        }else{
            num--;
        }
        show(num);
    }

    //切换到圆点导航指定的图片
    function goto(index){
        switch(index){
            case 0:show(0);doReset(index);break;
            case 1:show(1);doReset(index);break;
            case 2:show(2);doReset(index);break;
            case 3:show(3);doReset(index);break;
            case 4:show(4);doReset(index);break;
            default:alert('error');break;
        }
    }

    //指定右下角的导航亮度部分与图片对应，校对
    function proofread(index){
        //获取所有的导航标签
        var liList = document.getElementById('ul').getElementsByTagName('li');
        for(var i=0;i<liList.length;i++){
            //重置导航颜色,该操作覆盖之前设置的hover属性
            liList[i].style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
        }
        liList[index].style.backgroundColor = 'rgba(255, 255, 255, 1)';
    }
    proofread(0);//使得一开始导航栏指向第一个

    //使得图片从点击的导航栏开始播放
    function doReset(index){
        doStop();
        m = index;
    }
</script>
</html>