设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 请求大佬改正下错误，并标记下，非常感谢
返回列表 发新帖
查看: 3007|回复: 1

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

[复制链接]
小黄练编程
发表于 2022-4-9 18:20:38 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>滚动轮播图</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 .span1{
  12.                         position:absolute;
  13.                         top:50%;
  14.                         left:0;
  15.                         width:40px;
  16.                         height:40px;
  17.                         background-color:rgba(150,100,100,.6);
  18.                         cursor:pointer;
  19.                         display:none;
  20.                 }
  21.                 .span2{
  22.                         position:absolute;
  23.                         display:none;
  24.                         top:50%;
  25.                         right:0;
  26.                         width:40px;
  27.                         height:40px;
  28.                         background-color:red;
  29.                         background-color:rgba(150,100,100,.6);
  30.                         cursor:pointer;
  31.                 }
  32.                 .main{
  33.                         position:relative;
  34.                         width:400px;
  35.                         height:400px;
  36.                         background-color:gray;
  37.                         margin:0 auto;
  38.                 }
  39.                 .main img{
  40.                         width:400px;
  41.                         height:400px;
  42.                        
  43.                 }
  44.                        
  45.                 ul{
  46.                         display:flex;
  47.                         width:1600px;
  48.                         height:400px;
  49.                         background-color:red;
  50.                 }
  51.                 ul li{
  52.                         /* float:left; */
  53.                         list-style:none;
  54.                 }
  55.                 .em1{
  56.                         display:block;
  57.                         width:20px;
  58.                         height:20px;
  59.                         /* background-color:yellow; */
  60.                         margin:0 auto;
  61.                         margin-top:5px;
  62.                         border:5px solid #fff;
  63.                         border-bottom:none;
  64.                         border-right:none;
  65.                         transform:rotate(-45deg);
  66.                 }
  67.                 .em2{       
  68.                         display:block;
  69.                         width:20px;
  70.                         height:20px;
  71.                         /* background-color:yellow; */
  72.                         margin:0 auto;
  73.                         margin-top:5px;
  74.                         border:5px solid #fff;
  75.                         border-bottom:none;
  76.                         border-right:none;
  77.                         transform:rotate(135deg);
  78.                         }
  79.                 ol{
  80.                             position:absolute;
  81.                                 /* top:50%;*/
  82.                                 bottom:5%;
  83.                                 left:25%;
  84.                                 width:200px;
  85.                                 height:40px;
  86.                                 background-color:red;
  87.                         }
  88.                         ol li{
  89.                                 width:5px;
  90.                                 height:5px;
  91.                                 border-radius:50%;
  92.                                 border:3px solid black;
  93.                         }
  94.                 </style>
  95.         </head>
  96.         <body>
  97.                 <div class='main'>
  98.                         <ul>
  99.                                 <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
  100.                                 <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
  101.                                 <li><img src='img/24_404_8675904ec7935f2.gif'></li>
  102.                                 <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
  103.                         </ul>
  104.                         <ol>
  105.                         </ol>
  106.                         <span class="span1"><em class='em1'></em></span>
  107.                         <span class="span2"><em class='em2'></em></span>
  108.                 </div>
  109.                 <script>
  110.                 var ul=document.querySelector('ul');
  111.                 var ol=document.querySelector('ol');
  112.                 var lis=document.querySelector('li');
  113.                 var spans=document.querySelectorAll('span');
  114.                 console.log(spans[0].style.display);
  115.                   spans.addEventListener('mousemove',function(){
  116.                           for(var i=0 ;i<spans.length;i++){
  117.                           spans[i].style.display='block';
  118.                           }
  119.                   });
  120.                   spans.addEventListener('mouseleave',function(){
  121.                           for( var i=0 ;i<spans.length;i++){
  122.                           spans[i].style.display='none';
  123.                           }
  124.                   });
  125.                   console.log(spans.length);
  126.                 for(var i=0; i<lis.length;i++){
  127.                          var li=document.createElement('li');
  128.                          ol.appendChild(li);
  129.                 }
  130.        
  131.                 </script>
  132.         </body>
  133. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2022-4-10 14:58:22 | 显示全部楼层
本帖最后由 kogawananari 于 2022-4-10 15:00 编辑

spans加不了事件
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 02:25

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表