jquery点击缩略图切换视频播放特效代码分享

2023年6月11日上午6:34 • JavaScript

下面是详细讲解"jquery点击缩略图切换视频播放特效代码分享"的完整攻略：

1.需求概述

我们现在需要实现一个点击缩略图切换视频播放的特效，这里有两个核心需求：

点击不同的视频缩略图，展示不同的视频。
点击缩略图切换视频时需要加入过渡效果，让页面更加平滑流畅。

2.实现思路

实现一个点击缩略图切换视频的效果，首先需要用到jQuery库来实现相关的操作。

定义缩略图与视频的对应关系，可以使用 data-* 属性将缩略图与视频链接信息绑定在一起。
监听缩略图被点击的事件，对应地切换视频。
在切换视频时，加入过渡效果，让切换操作平滑流畅。

3.代码实现

3.1 HTML结构

我们需要在页面上创建一个视频播放区域与一个缩略图区域，然后再用自定义的 data-* 属性来为每个缩略图绑定相应的视频链接。

<div class="video-container">
  <video></video>
</div>

<ul class="thumbnail-list">
  <li>
    <img data-video-src="video/1.mp4" src="thumbnail/1.jpg">
  </li>
  <li>
    <img data-video-src="video/2.mp4" src="thumbnail/2.jpg">
  </li>
  <li>
    <img data-video-src="video/3.mp4" src="thumbnail/3.jpg">
  </li>
</ul>

3.2 CSS样式

为了让页面布局更加清晰，我们需要对视频和缩略图的样式进行设置。这里只给出示例代码。

.video-container {
  width: 900px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.thumbnail-list {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.thumbnail-list li {
  margin-right: 10px;
  cursor: pointer;
}
.thumbnail-list li:last-child {
  margin-right: 0;
}

3.3 jQuery代码

前面说过，我们需要利用 jQuery 实现切换视频的效果。这里是一份示例代码：

$(document).ready(function() {
  var $videoContainer = $('.video-container');
  var $videos = $videoContainer.find('video');
  var $thumbnails = $('.thumbnail-list img');

  // 初始化视频和缩略图
  $videos.eq(0).show();
  $thumbnails.eq(0).addClass('active');

  // 缩略图被点击时切换视频
  $thumbnails.on('click', function() {
    var $this = $(this);
    var idx = $this.index();

    $thumbnails.removeClass('active');
    $this.addClass('active');
    $videos.hide().eq(idx).fadeIn(300);
  });
});

在上面的代码中，我们首先找出 video 容器、所有视频元素和所有缩略图元素，并分别存储在变量中。然后我们将第一个视频元素显示，第一个缩略图元素变成选中状态。

当缩略图被点击时，我们将选中的缩略图元素与其他缩略图元素的选中状态进行切换，并将选中的视频进行展示。在展示视频时，我们使用 FadeIn()方法为其添加了一个300毫秒的过渡效果，使得切换更流畅。