如何创建一个缩略图视频滑块？

一、html部分代码

<!--容器--> <div id="container"> <!--视频--> <iframe src="" frameborder="0" allowfullscreen></iframe> <!--缩略图滑块--> <ul id="thumbnail-slider"> <li><img src="img/video1.jpg" alt=""></li> <li><img src="img/video2.jpg" alt=""></li> <li><img src="img/video3.jpg" alt=""></li> <li><img src="img/video4.jpg" alt=""></li> </ul> </div>

二、css部分代码

/容器样式/ #container { position: relative; width: 800px; }

/视频样式/ #container iframe { display: block; width: 100%; height: 450px; }

/缩略图滑块样式/ #thumbnail-slider { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.3); padding: 10px; width: 100%; overflow: hidden; } #thumbnail-slider li { display: inline-block; margin-right: 10px; cursor: pointer; } #thumbnail-slider li img { width: 100px; height: 60px; border: 2px solid #fff; display: block; opacity: 0.6; transition: opacity 0.2s; } #thumbnail-slider li.active img { opacity: 1; }

三、javascript部分代码

// 获取缩略图滑块元素 var thumbnailSlider = document.getElementById('thumbnail-slider');

// 获得每个缩略图元素 var thumbnailItems = thumbnailSlider.getElementsByTagName('li');

// 获得视频iframe元素 var videoIframe = document.getElementsByTagName('iframe')[0];

// 遍历每个缩略图并添加点击事件 for (var i = 0; i < thumbnailItems.length; i++) { // 获取当前缩略图 var thumbnail = thumbnailItems[i];

// 为缩