简单的视频库布局[jQuery] 这里是Flash视频对象 这里是Flash视频对象 这里是Flash视频对象 这里是Flash视频对象

默认情况下，第一个缩略图和第一个视频处于活动状态，单击第二个显示第二个视频并隐藏所有其他。。。如何在jQuery中编写这个简单的库

我真的很感激任何帮助

谢谢

您可以使用以下方法进行操作：

<ul id="thumb">
    <li class="active"><a href="#"><img src="img/thumb1.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb2.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb3.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb4.png" alt="" /></a></li>
</ul>

<div id="video-display">
    <div class="video video-1 active"> Flash Video Object Here </div>
    <div class="video video-2"> Flash Video Object Here </div>
    <div class="video video-3"> Flash Video Object Here </div>
    <div class="video video-4"> Flash Video Object Here </div>
</div>

$("#video-display .video:gt(0)").hide();
$("#thumb li").click(function() {
    $("#video-display .video").hide().eq($(this).index()).show();
});​​​​​​​​​​​​​

，如果您想移动

.active

类，只需添加一些和调用，如下所示：

<ul id="thumb">
    <li class="active"><a href="#"><img src="img/thumb1.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb2.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb3.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb4.png" alt="" /></a></li>
</ul>

<div id="video-display">
    <div class="video video-1 active"> Flash Video Object Here </div>
    <div class="video video-2"> Flash Video Object Here </div>
    <div class="video video-3"> Flash Video Object Here </div>
    <div class="video video-4"> Flash Video Object Here </div>
</div>

$("#video-display .video:gt(0)").hide();
$("#thumb li").click(function() {
    $("#video-display .video").hide().eq($(this).index()).show();
});​​​​​​​​​​​​​

$（“#视频显示.视频：非（.active）”）.hide（）//最初隐藏
$（“#拇指里”）。单击（函数（）{
$（this）.addClass（'active'）.sides（）.removeClass（'active'）；//
部分
$（“#video display.video”）.hide（）.removeClass（'active'）//隐藏上一个
.eq（$（this.index（））.show（）.addClass（'active'）；//显示新的
});​​​​​​​​​​​​​

这两种方法都是在

#video display

内的相同索引处选择视频

，作为您在

#thumb

内单击的

的索引