自制前端小项目（html css js）

目录

🚩.自定义播放器

🏠.图片自动消失

✨.小轮播图

🎃.旋转音乐盒

---

 前言：这些小项目全都是自创的。

如果需要应用，或则转发的话请与

博主联系，感谢你们的理解，

 

---

1.自定义播放器

在页面中放置26个div，每个div中写一个字

母。html结构中引入8个音频结构。给每个

div绑定点击键盘事件。根据键盘的每个

keyCode的不同来动态绑定对应的音频文件。

当按下对应的键盘字母，增添css样式，

音频播放。放开时，存储点击的事件，

将对应的音频存储在一个数组中。

点击按钮，循环播放存储的音频数组

---

html:

   
   
   

    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
 
       
       
       <div id="container">   
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="81" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>Q
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="87" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>W
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="69" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>E
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="82" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>R
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="84" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>T
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="89" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>Y
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="85" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>U
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="73" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>I
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="79" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>O
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="80" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>P
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="65" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>A
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="83" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>S
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="68" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>D
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="70" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>F
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="71" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>G
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="72" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>H
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="74" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>J
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="75" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>K
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="76" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>L
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="90" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>Z
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="88" class="key">
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <kbd>X
       
       
       </kbd>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
            
       
       
       <span class="sound">clap
       
       
       </span>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       </div>
      
      
      
     
     
     
    

     
     
     

      
      
      

     
     
     
     
     
     

      
      
      
        
       
       
       <div data-key="67"