JS基础知识学习

susanand

已于 2024-05-16 16:48:21 修改

阅读量1.2k

点赞数 19

文章标签： js

于 2024-04-10 16:06:42 首次发布

本文链接：https://blog.csdn.net/susanand/article/details/137600762

版权

js01 dom查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //为id为btn01的按钮绑定一个单击响应函数
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                //查找bj结点
                var bj =document.getElementById("bj");
                alert(bj.innerHTML);
            }

            //为id为btn02的按钮绑定一个单击响应函数
            var btn02=document.getElementById("btn02");
            btn02.onclick=function(){
                //查找所有li结点
                //getElementsByTagname()可以根据标签名来获取一组节点对象
                //这个方法会给我们返回一组对象，所有查询到的元素都会封装到对象中，
                //即使查询到的元素只有一个，也会封装到数组中返回
                var lis=document.getElementsByTagName("li");
                //打印lis
                // alert(lis.length)
                for (var i =0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn03的按钮绑定一个单击响应函数
            var btn03=document.getElementById("btn03");
            btn03.onclick=function(){
                //查找name=gender的所有节点
                var inputs=document.getElementsByName("gender");
                for (var i=0;i<inputs.length;i++){
                    //innerHTML用于获取元素内部的HTML代码
                    alert(inputs[i].className);
                }
            };  
            //为id为btn04的按钮绑定一个单击响应函数
            var btn04=document.getElementById("btn04");
            btn04.onclick=function(){

                
                var city=document.getElementById("city");
                //查找city下的所有li节点
                var lis=city.getElementsByTagName("li")
                for(var i=0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn05的按钮绑定一个单击响应函数
            var btn05=document.getElementById("btn05");
            btn05.onclick=function(){         
                var city=document.getElementById("city");
                //返回city的所有子节点
                var cns=city.childNodes;
                for (var i=0;i<cns.length;i++){
                    alert(cns[i]);
                }
                //children属性可以获取当前元素的所有子元素
                var cns2=city.children;
                alert(cns2.length);               
            };
            
            //为id为btn06的按钮绑定一个单击响应函数
            var btn06=document.getElementById("btn06");
            btn06.onclick=function(){
                //先获取id为phone的元素
                var phone=document.getElementById("phone");
                //返回phone的第一个子节点
                //phone.childNode[0]
                //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                var fir =phone.firstChild;
                alert(fir);
            }         
                //返回bj的父节点
                //返回android的前一个兄弟节点
                //读取username的value属性值
                //设置username的value属性值
                //返回bj的文本值

            
            
        }
    </script>
</head>
<body>
    <div id="total">
        < class=""inner>
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            <br>
            <br>
            <p>
                你喜欢那款单机游戏？
            </p>
            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>
            <br/>
            <br/>
            <p>
                你手机的操作系统是？
            </p>
            <ul id=""phone>
                <li>
                    IOS
                </li>
                <li id="andorid">
                    Android
                </li>
                <li>
                    Windows
                </li>
            </ul>
        </div>

    </div>

    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male">
        Male
        <input class="hello" type="radio" name="gender" value="female">
    </div>
</body>
</html>

js02 删除记录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>全选练习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script>
            window.onload=function(){
                //点击超链接后，删除一个员工信息
               //获取所有超链接

            var allA=document.getElementsByTagName("a");
            //为每个超链接都绑定一个单机响应函数
            for(var i=0;i<allA.length;i++){
            //for循环会在页面加载完成之后立即执行
            //而响应函数会在超链接点击时才执行
            //当响应函数执行时，for循环早已执行完毕
                allA[i].onclick=function(){
                var tr=this.parentNode.parentNode;
                var temp=confirm("确认删除吗？");
                if (temp){
                    tr.parentNode.removeChild(tr);
                }              
                    //点击超链接后，超链接会跳转页面，这是超链接的默认行为
                    //可以通过在响应函数的最后return false来取消这个默认行为
                return false;
                }
            }

            }
        </script>
        
    </head>
    <body>
        <table id="employeeTable">
            <tr>
                <th>name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>Tom@tom.com</td>
                <td>5000</td>
                <td><a href="deleteEmp?id=001">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerry@sohu.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=002">Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Boby@sohu.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=003">Delete</a></td>
            </tr>

        </table>
        <div id="formDiv">
            <h4>添加新员工</h4>
            <table>
                <tr>
                    <td class="word">name:</td>
                    <td class="inp">
                        <input type="text" name="empName" id="empName">
                    </td>
                </tr>
                <tr>
                    <td class="word">emial:</td>
                    <td class="inp">
                        <input type="text" name="email" id="email">
                    </td>
                </tr>
                <tr>
                    <td class="word">emial:</td>
                    <td class="inp">
                        <input type="text" name="salary" id="salary">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button id="addEmpButton" value="abc">
                            Submit
                        </button>
                    </td>
                </tr>
            </table>

        </div>
        
    </body>
</html>

js03 操作内联样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>全选练习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
        <script>
            window.onload=function(){
                //点击之后修改box的大小
                var box1=document.getElementById("box1");
                var btn01=document.getElementById("btn01");
                btn01.onclick=function(){
                    //修改box的宽度
                    //通过js修改元素的样式，语法：元素.style.样式名="样式值"
                    //注意，如果css的样式名中含有减号，这种样式名在js是不合法的，比如background-color
                    //需要将样式名修改为驼峰命名法，去掉减号，然后将-后的字母大写
                    //通过这种方式的设置的样式都是内联样式，具有最高的优先级
                    //但是在样式中写了！important，则此时将导致js修改样式失效
                    //通过style属性设置和读取的都是内联样式
                    box1.style.width="300px";
                    box1.style.backgroundColor="yellow";
                }
            }
        </script>       
    </head>
    <body>
        <button id="btn01">点我</button>
        <br/>
        <div id="box1"></div>       
    </body>
</html>

js03 事件对象

相关的面试：
（1）什么是事件传播？
事件传播包括事件捕获，目标阶段（执行阶段），事件冒泡。
addEventListener，接收3个参数;第一个参数event：监听的事件名称;第二个参数是函数：需要执行的事件;第三个参数是useCapture（变量）：用来判断是捕获还是冒泡,ture是处于捕获阶段。当各元素在不同的流中时，怎么判断事件发生的顺序，原则是：捕获优于冒泡。捕获是由父节点到子节点，冒泡是由子节点到父节点。
（2）js中的this的工作原理是什么？
可以把它想象成python构造函数中的self变量、每个函数的参数前面都隐含着this形参。
它是普通函数的自有变量，根据以下规则指向堆中的某块数据（对象的名字存在栈中，对象的数据存在堆中）：
new关键字创建的对象，函数对象里的this指向的创建的对象；
通过call/apply/bind操纵this指向我们给定的对象（显示绑定）；
函数作为对象的方法来调用，这个this指向的就是该对象（隐式绑定）。
箭头函数没有this,它的this基于词法作用域从外层获取。
（3）解释原型继承如何工作？
原型定义：每个函数都有prototype属性称之为原型，因为这个属性值也是对象，所以称为原型对象，
原型对象的作用：存放一些属性和方法，在js中实现继承
proto:定义每个对象都有__proto__属性
__proto__的作用：这个属性指向它的原型对象

原型链：对象都有__proto__属性，这个属性指向它的原型对象，原型对象也是对象，也有 __proto__属性，指向原型对象的原型对象，最终顶层找不到返回null.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>全选练习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #areaDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #showMsg{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        </style>

        <script>
           window.onload=function(){
            //当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
            var areaDiv=document.getElementById("areaDiv");
            var showMsg=document.getElementById("showMsg");
            
            //事件对象：当事件的响应函数被触发时，浏览器每次都将一个事件作为对象传递进响应函数,
            //在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘按下了哪个键
            //与事件相关的函数不会在事件发生前被调用
            areaDiv.onmousedown=function(event){
                //在showMsg中显示坐标
                //在IE8中，响应函数被调用时，浏览器不会传递事件对象；在IE8以及以下的浏览器中，是将事件对象作为window对象的属性保存的
                if(!event){
					event=window.event;
				}
				//为了解决事件兼容性问题
				//event=event||window.event;
                var x=event.clientX;
                var y=event.clientY; 
                showMsg.innerHTML="x="+x+",y="+y;
            };
           };
        </script>       
    </head>
    <body>
        <div id="areaDiv"></div>
        <div id="showMsg"></div>
    </body>
</html>

js04 div跟随鼠标移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>全选练习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #areaDiv{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script>
            //clientX和clientX相对于可见窗口的
            //div的偏移量是相对于当前页面的
            //pagex和pagey可以获取相对于当前页面的坐标，但是在IE8中不兼容
           window.onload=function(){
            //使div可以跟随鼠标移动          
            var box1=document.getElementById("areaDiv");
            document.onmousemove=function(event){
                //chrome认为浏览器的滚动条是body的，可以通过body,scrollTop来获取
                 //火狐浏览器认为滚动条是html的
                var st=document.body.scrollTop||document.documentElement.scrollTop;
                var left=event.clientX;
                var top=event.clientY;
                box1.style.left=left+"px";
                box1.style.top=st+top+"px";
            }
           };
        </script>       
    </head>
    <body style="height: 1000px;">
        <div id="areaDiv"></div>
       
    </body>
</html>

小节：事件绑定、事件委托、事件冒泡

https://blog.csdn.net/m0_64346035/article/details/124478726

面试题：
解释事件委托？把子级的事件绑定给父级。
事件是在冒泡的时候触发。利用的事件捕获和事件冒泡，才能进行了事件委托，提升了页面接在效率。

拖拽练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>全选练习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #areaDiv{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script>
            //clientX和clientX相对于可见窗口的
            //div的偏移量是相对于当前页面的
            //pagex和pagey可以获取相对于当前页面的坐标，但是在IE8中不兼容
           window.onload=function(){
            //拖拽box1元素
            //拖拽的流程：当鼠标在被拖拽元素上按下时，开始拖拽；
            //当鼠标移动时，跟随鼠标移动；
            //当鼠标松开时，被拖拽的元素固定在原位置
            var box1=document.getElementById("areaDiv");
            //为box1绑定一个鼠标按下事件
            //当鼠标在被拖拽元素按下时，开始拖拽onmousedowmn
            box1.onmousedown=function(event){
                event=event||window.event;
                //鼠标相对于div的偏移量 鼠标.clentX-元素.offsetLeft
                //鼠标相对于div的偏移量 鼠标.clentY-元素.offsetTop
                var ol=event.clientX-box1.offsetLeft;
                var ot=event.clientY-box1.offsetTop;
                //为document绑定一个onmousemove事件
                document.onmousemove=function(event){
                    event=event||window.event;
                    //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
                    //获取鼠标的坐标
                    var left=event.clientX-ol;
                    var top=event.clientY-ot;
                    //修改box1的位置
                    box1.style.left=left+"px";
                    box1.style.top=top+"px";               
                };
                //为元素绑定一个鼠标松开事件
                box1.onmouseup=function(){
                    //当鼠标松开时，被拖拽元素固定在当前位置onmouseup
                    //取消document的onmousemove事件
                    document.onmousemove=null;
                    //取消document的onmouseup事件
                    document.onmouseup=null;
                }
            }
           }               
        </script>       
    </head>
    <body style="height: 1000px;">
        <div id="areaDiv"></div>   
    </body>
</html>

滚轮事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #box1{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script>
         window.onload=function(){
            //当鼠标滚轮向下滚动时，box1变长
            //当鼠标滚轮向上滚动时，box1变短
            
            //获取id为box1的div
            var box1=document.getElementById("box1");

            //为box1绑定一个鼠标滚轮事件
            box1.onmousewheel=function(event){
                //判断滚轮方向
                if(event.wheelDelta>0 || event.detail>0){
                    //向上box1变短
                    box1.style.height=box1.clientHeight-100+"px";
                }else{
                    //向下box1变长
                    box1.style.height=box1.clientHeight+100+"px";
                }

                //当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
                //这是浏览器的默认行为，如果不希望，则可以取消默认行为

                //使用addEventListener()方法绑定响应函数，取消默认行为不能使用retur false
                //需要使用event来取消默认行为event.preventDefault();
                //但是IE8不支持event.preventDefault（）；如果直接调用会直接报错，可以直接这样写：event.preventDefault&&event.preventDefault()
                return false;
                 
            }
         }
        </script>       
    </head>
    <body >
       <div id="box1"></div>
    </body>
</html>

切换图片练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
       
        <script>
            //BOM:浏览器对象模型，bom可以使我们通过js来操作浏览器，在bom中为我们提供了一组对象，用来完成浏览器的操作
            //bom对象：window（代表的整个浏览器的窗口），同时window也是页面中的全局对象
            //navigator(代表当前浏览器浏览的信息);location（地址栏信息）；
            //history(代表浏览器的历史记录)只能操作浏览器向前和向后翻页，而且该操作只在当前访问 有效；
            //scree（代表用户的息屏信息）
            //这是bom对象在浏览器中都作为window对象的属性保存的；可以通过window对象来使用，也可直接使用
        //使得图片可以自动切换
        window.onload=function(){
             var image1=document.getElementById("image1");
        var imgArr=["C:/Users/A/Desktop/Snipaste_2024-04-11_19-28-28.jpg","C:/Users/A/Desktop/4e673add41fec3bc40311e83bf7d797.jpg"]

        //创建一个变量，用来保存当前图片的索引
        var index=0;
        var timer;
        var but1=document.getElementById("but1");
        but1.onclick=function(){
        //目前，我们点击一次，就会开启一个定时器；点击多次就会开启多个定时器，导致图片切换太快，并且只能关闭最后一个定时器
        //在开启一个新的定时器前，需要关闭当前元素的上一个定时器
        clearInterval(timer);
        //点击按钮后， 图片的自动切换 
        timer= setInterval(function(){
            index++;
            //修改img1的src属性
            if (index>=imgArr.length){
                index=0;
            }
            image1.src=imgArr[index];
        },1000);      
       };
       
       var but2=document.getElementById("but2");
       but2.onclick=function(){
        //点击按钮后，停止图片的自动切换，关闭定时器
        //clearInterval可以接受任何参数，如果参数是一个有效的定时器的标识，则停止对应的定时器，如果参数不是一个有效的标识，则什么也不做
        clearInterval(timer);
        }
        }    
        </script>       
    </head>
    <body>
     <img id="image1" src="C:/Users/A/Desktop/Snipaste_2024-04-11_19-28-28.jpg">
    </body>
    <br/>
    <br/>
    <button id="but1">开始</button>
    <button id="but2">停止</button>
</html>

定时器应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
       <style>
        *{
            margin: 0;
            padding:0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 200px;
        }
       </style>
        <script>
          window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var btn03=document.getElementById("btn03");
            var btn04=document.getElementById("btn04");
            btn01.onclick=function(){
              move(box1,"left",800,10);
               
            };
            btn02.onclick=function(){
              move(box1,"left",0,10);
               
            };
            btn03.onclick=function(){
              move(box2,"left",800,10);
               
            };
            btn04.onclick=function(){
              move(box2,"width",800,10,function(){
                move(box2,"height",800,10,function(){
                  move(box2,"top",0,10,function(){

                  })
                })
              });
               
            };
          };
          /* 
            参数：
              obj要执行动画的对象；
              attr:要执行动画的样式；
              target:执行动画的目标位置；
              speed:移动的速度（正数向右移动；负数向左移动）
              callback:回调函数，函数执行完之后执行

          */
          function move(obj,attr,target,speed,callback){
            //关闭上一个定时器
            clearInterval(obj.timer);
            //获取元素目前的位置
            var current=parseInt(getStyle(obj,attr));
            if(current>target){
              speed=-speed;
            }

            //开启一个定时器，用来执行动画效果
            //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器   
            obj.timer=setInterval(function(){
                var oldValue=parseInt(getStyle(obj,attr));                 
                var newValue=oldValue+speed;
                if((speed<0 && newValue<target)||(speed>0 && newValue>target) ){
                  newValue=target;
                }
                
                obj.style[attr]=newValue+"px";
                //当元素的移动到800px时，停止定时器
                if(newValue===target){
                  clearInterval(obj.timer);
                  //动画执行完毕，调用回调函数
                  callback&&callback();

                 }
            },speed);
          }
          //obj要获取样式的元素
          //name要获取的样式名
          function getStyle(obj,name){
            if (window.getComputedStyle){
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj,null)[name];
            }else{
              //IE8的方式，没有getComputedStyle()方法
              return obj.currentStyle[name];
            }
          }
        </script>       
    </head>
   <body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试</button>

    <div id="box1"></div>
    <div id="box2"></div>
    <div style="width: 0;height: 1000px; border-left:1px black solid; position: absolute;left: 800px;top :0"></div>
   </body>
</html>

轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
          *{
            margin: 0;
            padding: 0;
          }
          #outer{
            width: 276px;
            height: 201px;
            background-color: yellowgreen;
            padding: 10px 0;
            /* 开启相对定位 */
            position: relative;
            /* 剪裁溢出的内容 */
            overflow:hidden;



          }
          #imgList{
            list-style: none;
            width: 1380px;
            position: absolute;
            left: -276px;

          }
          #imgList li{
            float: left;
            margin: 0 10px;
          }
          #ng{
            position: absolute;
            bottom: 15px;
            left: 85px;

          }
          #ng a{
            /* 设置超链接浮动 */
            float: left;
            display: block;
            width: 15px;
            height: 15px;
            background-color: aqua;
            margin: 0 5px;
            opacity: 0.5;
            /* 兼容IE8透明 */
            filter: alpha(opacity=50);

          }
          /* 设置鼠标移入的效果 */
          #ng a:hover{
            background-color: antiquewhite;
          }
        </style>
        <script>
          window.onload=function(){
            var imgList=document.getElementById("imgList");
            var imgArr=document.getElementsByTagName("img");
            imgList.style.width=276*imgArr.length+"px";

            //设置导航按钮居中
            var navDiv=document.getElementById("ng");
            var outer=document.getElementById("outer");
            navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
            //默认显示图片的索引
            var index=0;
            //获取所有的a
            var allA=document.getElementsByTagName("a");
           
            //设置默认选中效果
            allA[index].style.backgroundColor="black";

            /* 点击超链接切换图片 */
            for(var i=0;i<allA.length;i++){
              allA[i].num=i;
              
              allA[i].onclick=function(){
                clearInterval(timer);
                index=this.num;
                imgList.style.left=-276*index+"px";
                //点击的时候要关闭自动切换定时器
                move(imgList,"left",-276*index,20,function(){
                    //重新开启轮播图
                    autoChange();
                  })                              
              };
            }
          
            var timer;
             //自定切换图片
            autoChange();

            function setA(){
              //判断当前索引是否是最后一张图片
              if(index>=imgArr.length-1){
                //则将index设置为0
                index=0;
                //通过css将imgArr瞬间向左移动
                imgList.style.left=0;
              }
              for (var i=0;i<allA.length;i++){
                //还原回默认样式
                allA[i].style.backgroundColor="red";
              }
              allA[index].style.background="black";
            }

            //创建一个函数，用来开启自动切换
            function autoChange(){
              timer=setInterval(function(){
                  //索引自增
                  index++;
                  index%=imgList.length;
                  //执行动画，切换图片
                  move(imgList,"left",-276*index,20,function(){
                    //修改导航栏
                    setA();
                  })
                   
              },3000)
            }
          };
        </script>
    </head>
    <body>
      <div id="outer">
        <ul id="imgList">
          <li>
            <img src="C:/Users/A/Desktop/Snipaste_2024-04-14_16-02-39.jpg"> 
          </li>
          <li>
            <img src="C:/Users/A/Desktop/Snipaste_2024-04-14_16-02-39.jpg"> 
          </li>
          <li>
            <img src="C:/Users/A/Desktop/Snipaste_2024-04-14_16-02-39.jpg"> 
          </li>
          <li>
            <img src="C:/Users/A/Desktop/Snipaste_2024-04-14_16-02-39.jpg"> 
          </li>
          <li>
            <img src="C:/Users/A/Desktop/Snipaste_2024-04-14_16-02-39.jpg"> 
          </li>
        </ul>
        <div id="ng">
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
        </div>
      </div>
    </body>

</html>