视频的简单图库布局[jQuery]
视频的简单图库布局[jQuery]
提问于 2010-06-30 21:46:19
<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中编写这个简单的图库。
我真的很感谢任何人的帮助。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-06-30 22:44:18
您可以像这样使用.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
});两者的方法都是在#video-display中选择与您在#thumb中单击的<li>的索引相同的索引中的视频<div>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3149837
复制相关文章
相似问题
腾讯云开发者
