有bug的轮播套简单轮播图，懒得修复

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sada</title>
</head>
<style>
    #tyu{
       
        position: relative;
        right: -700px;
        width: 200px;
    }
    #tuu{
        width: 500px;
        z-index: 3;
        height: 300px;
    }

    #ta{
        opacity:0.5;
        padding-top: 120px;
        position: fixed;
        width: 30px;
        z-index: 2;
        float: left;
        right: 712px;
       
    }
    #tb{
        opacity:0.5;
        padding-top: 120px;
        position: fixed;
        width: 30px;
        z-index: 2;
        float: left;
        left: 707px;
       
    }
</style>
<body>
    <div id="tyu">
      <img id="ta" src="a.png" onclick="doem()"   />
      <img id="tb" src="b.png" onclick="doem2()" />
      <img id="tuu" src="1.jpg" />
    </div>
</body>
    <script>
        var a=document.getElementById("tuu");
        var i=2;
        var inter;
   
          interr();
          setTimeout(interr,4000);

        function interr(){
        inter=setInterval(test,3000);}


        function doem(){
            clearInterval(inter);
            console.log(i);
            a.src=i+".jpg";  
            console.log(a);    
            i++;
            if(i==6){
                i=1;
            }          

           
 
        }
        function doem2(){
            clearInterval(inter);
            console.log(i);
            if(i==2){
                a.src=5+".jpg";
            }
            else{a.src=(i-2)+".jpg";
            console.log(a);  
            i--;}
            if(i==1||i==0){
                i=6;
            }          

           
 
        }

       
        function test(){    
            a.src=i+".jpg";
            i++;
              if(i==6){
                i=1;
              }
             
        }

     
     
   
   

   
    </script>
</html>
posted @ 2022-12-15 17:51  谢远栋  阅读(22)  评论(0)    收藏  举报