Question

<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>

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

我真的很感激任何帮助。

谢谢！

Answer 1

你可以使用.index()和.eq()这样做：

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

You can try it out here，如果您想移动.active课程，只需添加几个.addClass()和.removeClass()来电，如下所示：

$("#video-display .video:not(.active)").hide();                  //hide initially
$("#thumb li").click(function() {
    $(this).addClass('active').siblings().removeClass('active'); //<li> portion
    $("#video-display .video").hide().removeClass('active')      //hide previous
       .eq($(this).index()).show().addClass('active');           //show new
});

两者中的方法是在<div>内的同一索引处选择视频#video-display，作为您在<li>内点击的#thumb的索引。

视频的简单图库布局[jQuery]

1 个答案: