将图像更改为视频

Question

我有一个图片库，您可以通过在同一页面上显示的“鼠标输入”缩略图来更改显示的图像。现在，我想将视频添加到图库中，但是它与我为图像提供的代码不兼容。问题是我希望图片和视频保持一定大小。由于我要添加视频，因此img标签不会将视频显示为源，并且当我将img更改为iframe时，视频效果很好，但图片不再响应。这是我的代码：

HTML

<div class="slide_work">
 <img src="images/Illustration/puzzled.png">
</div>

<div class="slide_thumbs">
 <div id ="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
 <div class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>

CSS

.slide_work > img {
 float:right;
 height:auto;
 width:auto;
 max-height:70vh;
 max-width:100%;

 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}

（（我尝试在CSS中添加另一个块，在其中我将“ img”更改为“ iframe”，但是就图像的响应性而言，它什么也没做。）

JavaScript

$( ".puzzled_img" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'images/Illustration/puzzled.png');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_vid").removeAttr('id', 'thumbs_active');
})

$( ".puzzled_vid" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'https://player.vimeo.com/video/12345678');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_img").removeAttr('id', 'thumbs_active');
})

Answer 1

[而不是替换<img>标记的src属性或替换元素，只需添加更多幻灯片并根据索引值显示/隐藏当前正在悬停的幻灯片。

下面的示例有两张幻灯片，其中一张具有hidden类。您可以使用CSS隐藏此元素。缩略图的索引值是data-attribute，告诉您它们控制幻灯片列表中的哪个元素。每当您将鼠标悬停在缩略图上时，它都会寻找索引正确的幻灯片，并在隐藏其他所有幻灯片的同时显示该缩略图。

<div class="slide_work">
  <div class="slide_item">
    <img src="images/Illustration/puzzled.png">
  </div>
  <div class="slide_item hidden">
    <iframe src="https://player.vimeo.com/video/12345678"></iframe>
  </div>
</div>

<div class="slide_thumbs">
  <div data-index="0" id="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
  <div data-index="1" class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>
</div>

var $slides = $('.slide_item');

$('.slide_thumbs > div').on('mouseenter', function() {
  var $this = $(this);
  var index = $this.data('index');
  var $target = $slides.eq(index);
  $slides.addClass('hidden');
  $target.removeClass('hidden');
});