将图像更改为视频

Question

我有一个图片库，您可以在其中通过同一页面上显示的 "mouse entering" 个缩略图更改显示的图像。现在我想将视频添加到图库中，但它不适用于我为图像提供的代码。问题是我希望图片和视频保持一定大小。因为我想添加视频，所以 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 属性或元素，只需添加更多幻灯片并根据索引值显示/隐藏当前悬停的幻灯片。

下面的示例有两张幻灯片，其中一张有 class 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');
});

Answer 2

最后我决定这样做：

HTML

<div class="slide_work">
    <div class="slide_item_img">
        <img class="slide_item_img" src="images/Illustration/puzzled.png"></div>
    <div class="slide_item_vid" style="display:none; float:right">
        <iframe class="slide_item_vid" style="display:none; float:right" src="https://player.vimeo.com/video/12345678" width="640" height="747" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
</div>

CSS

$( ".puzzled_img" )
  .mouseenter(function(){
    $(".slide_item_vid").css("display", "none");
    $(".slide_item_img").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_vid").removeAttr('id', 'thumbs_active');
  })

$( ".puzzled_vid" )
  .mouseenter(function(){
    $(".slide_item_img").css("display", "none");
    $(".slide_item_vid").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_img").removeAttr('id', 'thumbs_active');
  })

将图像更改为视频

Change image to video

html

javascript

css

iframe

responsive