多媒体任务按时间自动切换，实现预览

Question

这是一个多媒体广告系统，现在想着在html页面上实现预览功能，
每个任务有多任务项目，
每个项目里有多个布局，
每个布局中有多个资源。

例如:一个任务有3个任务项，时长分别是60秒，50秒，40秒，那么任务总时长就是150秒
第一个任务项包含3个布局，每个布局中分别包含2个资源，每个资源是20秒
第二个任务项包含2个布局，每个布局中分别包含3个资源，每个资源是10秒
第三个任务项包含4个布局，每个布局中分别包含2个资源，每个资源是20秒

这个轮播功能，在html如何实现呢