代码之家 › 专栏 › 技术社区 › eozzy

简单的视频库布局[jQuery]

gallery grid video jquery

eozzy · 技术社区 · 15 年前

<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 回复 | 直到 15 年前

tw16 13 年前

.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

推荐文章

Nora PÄ« · 统一问题在2d精灵后面排序立方体

2 年前

K'man Amuda Jr. · React-Hook useEffect接收到依赖项未知的函数。传递内联函数,而不是1个警告

3 年前

bcg · 使用Javascript从视频文件中提取地理标记

7 年前

abagshaw · OpenCV从url加载视频

7 年前

Marvin von Rappard · 剪切多个视频的结尾

7 年前

Alexander Tumin · 如何在碎片化MP4中正确采样h264 NAL单元

7 年前

Sergio santa · 使用jQuery更改和加载iframe src属性

7 年前

user3751111 · 为什么在使用AVMutableCompositionTrack合并音频和视频时没有声音?[已关闭]

7 年前

Neywiny · 如何设置DASH流?

7 年前

Charles Yao · 如何在播放同一本地视频时同步多个AVPlayer

7 年前