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 に答える