请求大佬改正下错误，并标记下，非常感谢

小黄练编程 · 发表于 2022-4-9 18:20:38

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>滚动轮播图</title>
                <style>
                *{
                        padding:0;
                        margin:0;
                }
                .span1{
                        position:absolute;
                        top:50%;
                        left:0;
                        width:40px;
                        height:40px;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                        display:none;
                }
                .span2{
                        position:absolute;
                        display:none;
                        top:50%;
                        right:0;
                        width:40px;
                        height:40px;
                        background-color:red;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                }
                .main{
                        position:relative;
                        width:400px;
                        height:400px;
                        background-color:gray;
                        margin:0 auto;
                }
                .main img{
                        width:400px;
                        height:400px;
                        
                }
                        
                ul{
                        display:flex;
                        width:1600px;
                        height:400px;
                        background-color:red;
                }
                ul li{
                        /* float:left; */
                        list-style:none;
                }
                .em1{
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(-45deg);
                }
                .em2{        
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(135deg);
                        }
                ol{
                            position:absolute;
                                /* top:50%;*/
                                bottom:5%;
                                left:25%;
                                width:200px;
                                height:40px;
                                background-color:red;
                        }
                        ol li{
                                width:5px;
                                height:5px;
                                border-radius:50%;
                                border:3px solid black;
                        }
                </style>
        </head>
        <body>
                <div class='main'>
                        <ul>
                                <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
                                <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
                                <li><img src='img/24_404_8675904ec7935f2.gif'></li>
                                <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
                        </ul>
                        <ol>
                        </ol>
                        <span class="span1"><em class='em1'></em></span>
                        <span class="span2"><em class='em2'></em></span>
                </div>
                <script>
                var ul=document.querySelector('ul');
                var ol=document.querySelector('ol');
                var lis=document.querySelector('li');
                var spans=document.querySelectorAll('span');
                console.log(spans[0].style.display);
                  spans.addEventListener('mousemove',function(){
                          for(var i=0 ;i<spans.length;i++){
                          spans[i].style.display='block';
                          }
                  });
                  spans.addEventListener('mouseleave',function(){
                          for( var i=0 ;i<spans.length;i++){
                          spans[i].style.display='none';
                          }
                  });
                  console.log(spans.length);
                for(var i=0; i<lis.length;i++){
                         var li=document.createElement('li');
                         ol.appendChild(li);
                }
        
                </script>
        </body>
</html>

kogawananari · 发表于 2022-4-10 14:58:22

本帖最后由 kogawananari 于 2022-4-10 15:00 编辑

spans加不了事件

账号		自动登录	找回密码
密码			立即注册