JS实现轮播图效果(同时播放音频)

目录

轮播图

内容

样式

动作

Gitee链接


轮播图

目标:切换到对应的角色就播放相应的音频。

页面间隔固定时间会切换到下一图片,同时播放对应的音频,比如角色A 对应 音频1 等。

图片左右两侧有控件用来切换图片,也就是两个单击事件和一个定时器。

轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面,还有网易云音乐App的发现模块主页。

效果展示

样式很丑。。:

JS实现轮播图效果(同时播放音频)_第1张图片

 

内容

主要用的image标签和 audio标签。


    

样式

动作

如果能直接从本地读取图片并且处理的话就更好了,这里为了方便把音频和图片进行了编号。

需要注意的是,如果使用的是谷歌浏览器,那么页面不会自动播放音频,因为Chrome将音频和视频自动播放禁止了,火狐浏览器是可以自动播放的。

Gitee链接

FrontEndCode: html css js 练习Demo - Gitee.com

你可能感兴趣的:(前端,前端,javascript,前端框架)