老师请您帮忙来检测一下代码谢谢

首页课程实战体系课手记专栏慕课教程

老师请您帮忙来检测一下代码谢谢

来源：1-1 课程简介

慕粉1924517932

2021-12-17 20:14:29

问题描述：

老师我请您帮忙给检测一下为什么我的代码没有任何效果，是哪里忘了写还是，写错了，请您帮忙指点一下，谢谢

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    *{
        padding:0px;
        margin:0px;
    }
    .box{
        width:650px;
        height:350px;
        margin: 50px auto;
        border: 1px solid #000;
        position: relative;
    }
    .box ul{
        width:6000px;
        list-style: none;
        transition: left .5 ease 0s;
    }
    .box .list li{
        float: left; 
    }
    a{
        Text-decoration: none;
    }
    .leftbtn{
        width:30px;
        height:30px;
        border:1px solid #000;
        border-radius: 50%;
        position:absolute;
        top:50%;
        margin-top:-15px;
        left:20px;
        font-size: 30px;
        color:white;
        text-align: center;
        line-height: 30px;
        background-color: red;
    }
    .rightbtn{
        width:30px;
        height:30px;
        border-radius: 50%;
        border:1px solid #000;
        background-color: red;
        font-size: 30px;
        color:white;
        text-align: center;
        line-height: 30px;
        background-color: red;
        position:absolute;
        top:50%;
        margin-top:-15px;
        right:20px;
    }
</style>
<body>
    <div class="box"id="box">
       <ul class="list"id="list">
           <li><img src="image/hudie.jpg"width="650px"height="350px"></li>
           <li><img src="image/huoshaoyun.jpg"width="650px"height="350px"></li>
           <li><img src="image/jiudian.jpg"width="650px"height="350px"></li>
           <li><img src="image/shanshui.jpg"width="650px"height="350px"></li>
           <li><img src="image/qingkong .jpg"width="650px"height="350px"></li>
       </ul>
       <a href="javascript:;"class="leftbtn"id="leftbtn">&lt;</a>
       <a href="javascript:;"class="rightbtn"id="rightbtn">&gt;</a>
    </div>
 
</body>
<script>
     var list=document.getElementById('list');
     var rightbtn=document.getElementById('rightbtn');
     var leftbtn=document.getElementById('leftbtn');
     var cloneli=list.firstElementChild.cloneNode(true);
     list.appendChild(cloneli);
     var idx=0;
     var lock=true;
     rightbtn.onclick=function(){
        if(!lock) return;
        lock=false; 
        idx++;
        list.style.transition='left .5s ease 0s';
        if(idx>4){
          setTimeout(function(){
              list.style.transition='none';
              list.style.left=0;
              idx=0;
          },500);
        } 
       list.style.left=-idx*650+'px';
       setTimeout(function(){
          lock=true;
       },500)
     }
     leftbtn.onclick=function(){
       if(!lock) return;
       lock=false;  
       if(idx==0){
           list.style.left='none';
           list.style.left=-5*650+'px';
           idx=5; 
           setTimeout(function(){
         list.style.transition='left .5s ease 0s';
         idx=4;
         list.style.left=-idx*650+'px';
         },0);
        }else{
          idx--;
          list.style.left=-idx*650+'px';
        }
        setTimeout(function(){
         lock=true;
        },500);
     }
 </script>
</html>

写回答

1回答