618快到了送上自制前端小项目（html css js）

本文链接：https://blog.csdn.net/m0_54866636/article/details/126070456

本文介绍了四个自创的前端小项目：1. 自定义播放器，通过键盘事件绑定音频播放；2. 图片自动消失，图片上的计数器归零后图片消失；3. 小轮播图，实现图片滑动切换；4. 旋转音乐盒，点击图片播放对应音频。适合前端初学者实践。

摘要由CSDN通过智能技术生成

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

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

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

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