Javascript fadein函数用于指定列表中的特定元素

我有一个视频滑块，它通过单击缩略图然后播放视频来工作。问题是，我正在尝试创建一个功能，使视频淡入淡出，而不是仅仅显示。我通常可以这样做，但由于缩略图/视频是列表形式，我不知道如何设置它。 身体的部分是这样的

    <div id="wrapper">
      <div id="bigPic">
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
            </div>


  <div class="buttons">
    <div id="content">
        <ul class='thumbs'>
                <li rel='1'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo1();"/></li>
                <li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo2();"/></li>
                <li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo3();"/></li>
                <li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo4();"/></li>
                <li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo5();"/></li>
                <li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo6();"/></li>
            </ul>
       </div>
      </div>
     </div>

---

您可以在视频上方放置一个实心div，然后将其淡出。音频从一开始就是满音量的-可能会破坏效果。

好吧，我会这样做的

不知道你在做什么，但我只会使用一个视频元素，并根据需要进行更改。除非您一次播放多个视频，否则并不需要为每个视频指定单独的元素

<div id="wrapper">
    <div id="bigPic">
        <video id="myVid" alt="" height="240" width="360" style="margin-left:-8px; margin-top:-16px;"/>
    </div>

    <div class="buttons">
        <div id="content">
            <ul class='thumbs'>
                <li rel='1'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
            </ul>
       </div>
    </div>
</div>

现在，您只需要一个淡入视频元素并替换源的函数，我会选择一些动态的，最好将视频命名为video1.mp4、video2.mp4等，并使用li元素索引来选择视频，但您也可以将视频的链接放置在一个数组中，并且仍然使用索引，例如：

var numb = $(this).index(),
    videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
    thisVideo = videos[numb];

总而言之，它看起来像：

$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).animate({opacity : 0}, 1500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).animate({opacity : 1}, 1500);
    });
});

​我在视频元素中添加了一个ID，因为它比在DOM中搜索标记名更快、更容易

这里有一个演示它是如何工作的，可能还需要一些帮助，但至少有一些演示！

---

​

你的意思是我通常可以这样做吗？请你解释一下，你可能还应该包括播放视频功能的代码？@Samad抱歉，通常我的意思是，对于图像而不是视频，我可以应用一个功能，使它们通过淡入淡出的方式从一个过渡到另一个。对于这些视频，我不能。好吧，但我必须在每次单击不同的拇指时重置该div。这值得一试，而且视频可以推迟到以后再开始，这样音频就不会把它弄糟……iPad上的播放功能能正常工作吗？这就是它的目的，但如果不是的话，我可以调整我现有的。不管怎样，谢谢你，这很有帮助！jQuery和视频元素都应该在iPad上工作。我认为游戏就是你想要的，就我所知，它很好用。由于某种原因，它不起作用。当拇指被点击时，没有变化。那会是什么？

var numb = $(this).index(),
    videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
    thisVideo = videos[numb];

$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).animate({opacity : 0}, 1500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).animate({opacity : 1}, 1500);
    });
});