Javascript 如何制作一个可以悬停的图库，或者制作一个视频或图像缩略图，并显示更大的图像？

我正在尝试创建一个像这样的图像库

要点： 1.它有一个更大的图像，当我悬停在缩略图上时，我想把它换成缩略图中的内容。 2.我想把第一个“大图像”变成一个视频。 3.我希望标题随每个图像切换而更改

我已经能够想出如何制作一个缩略图列表，我可以悬停在上面，并改变一个更大的图像。我还问了前面的一个问题，并得到了一个关于如何进行视频交换的好答案。我陷入的问题是如何改变字幕，如何让视频成为第一个出现的东西

这就是我一直在研究的

HTML 
<div id="imgDetail">
 <video  width="320" height="240" controls>
   <source src="http://theinfluence.co/assets/img/Traackr.mp4" type="video/mp4" />
</video>
<img src="http://theinfluence.co/assets/img/traackr2.png" id="bigImg" />
<ul>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing1.png" class="thumb" />
    </li>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing2.png"  class="thumb" />
    </li>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing3.png" class="thumb" />
   </li>
    <li ><img src="http://theinfluence.co/assets/img/ebuzzing4.png" class="thumb   video" /></li>
   <!--- Etc--->
  </ul>
</div>

Javascript

$('#imgDetail li img').not(".video").hover(function(){
    $('#imgDetail video').hide();
    $('#bigImg').show();        
    $('#bigImg').attr('src',$(this).attr('src'));
});

$('#imgDetail li img.video').hover(function(){
    $('#bigImg').hide();
    $('#imgDetail video').show();        
});

---

任何帮助都将不胜感激

要完成标题的更改，可以将标题存储为元素本身的

数据

属性。例如，您可以执行以下操作：

<img src="http://theinfluence.co/assets/img/ebuzzing1.png" class="thumb" data-caption="My caption here"/>

对于标题元素本身，我建议使用HTML5的内置功能，通过使用一个图：

<figure id="myFigure">
    <img src='image.jpg' />
    <figcaption>Caption here</figcaption>
</figure>

要首先制作视频，您真正需要做的就是启动隐藏的“bigImg”元素。您可以通过在CSS规则中添加这一行来实现这一点：

#bigImg {
    display: none;
}

---

希望这有帮助

你在使用插件吗？这很好。谢谢我是否应该向每个

图像添加地物id和figcaption<不，不需要这样做。只需在“bigImg”元素周围添加一个figure元素，在图像后面添加一个“figcaption”元素。

<figure id="myFigure">
    <img src='image.jpg' />
    <figcaption>Caption here</figcaption>
</figure>

$('#imgDetail li img.video').hover(function(){
    var caption = $(this).data('caption');
    $('#myFigure > figcaption').text(caption);        

    $('#bigImg').hide();
    $('#imgDetail video').show();        
});

#bigImg {
    display: none;
}