0

这是我的html代码

<table width="100%">
        <tr>
            <td colspan="4" align="right">
            </td>
        </tr>
        <tr>
            <td align="left" colspan="3">
                <h1>
                    Featured</h1>
            </td>
            <td align="right">
                <table>
                    <tr>
                        <td>
                            <h1>
                                Popular</h1>
                        </td>
                        <td>
                            <h1>
                                |
                            </h1>
                        </td>
                        <td>
                            <h1>
                                Recent</h1>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                <iframe width="300" height="400" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    onload="Show();" allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
        </tr>
        <tr>
            <td style="padding-bottom: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
        </tr>
    </table>

它是一种小画廊。我想要实现的是点击右侧的任何小视频，它必须加载到特色视频框中。如何做到这一点？

这是jsfiddle链接 http://jsfiddle.net/4HQc4/9/

4

1 回答 1

2

改用这个：http: //jsfiddle.net/4HQc4/10/

JS：

$(document).on('click', 'td img', function () {
    var videoID = $(this).data('video');
    $('.featured-box iframe').fadeOut(function () {
        $(this).attr('src', 'http://www.youtube.com/embed/' + videoID).load(function () {
            $(this).fadeIn();
        });
    });
});

HTML 更改：

<td style="padding-top: 0px;">
    <img src="http://img.youtube.com/vi/oNgMIrNs1-o/mqdefault.jpg" data-video="oNgMIrNs1-o" />
</td>

这将使用视频预览图像并在单击时将新视频加载到精选 div 中。

于 2013-06-12T10:58:33.603 回答