JQuery - 画廊的专业帮助（大任务）

Question

阅读时间太长了。
这是我的画廊脚本的核心。这看起来比实际上更复杂.. 但由于我缺乏 JQuery (Javascript) 知识，我无法自己编程。大多数 javascript 只是伪的，所以如果您可以将伪 javascript 翻译成实际有效的 javascript (Jquery)，那会很好。

我有一个展示大图的画廊。我有一个缩略图列表，其中包含一些用户可以单击以在图库图像之间导航的缩略图。我有一个信息库。它是一个列表，其中包含画廊的所有大图像。画廊从这个信息池中获取信息。 - 在一些动画问题中我使用了一个不可见的池。

HTML

<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
</ul>
</div>

<div id="thumbs">
<ul>
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery-->
<li>Thumb 2</li>
<li>Thumb 3</li>
<li>Thumb 4</li>
</ul>
</div>

<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes -->
<ul> <--! This list is the information pool which stores the big pictures of the gallery-->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

伪（JQuery）Javascript

$('#thumbs ul > li).click( function() {
$(this).add the next li from the pool to this list //this snippet is important for me - how do I write this?
});

用户互动，例如 这是它应该如何工作的工作流程——我愿意接受每一个好的想法来获得结果

用户点击了 3 号缩略图 脚本从#pool 中获取第 3 项 并将其吸引到#gallery（需要Javascript ^^）

看起来像这样：

HTML

<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li> 
</ul>
</div>

现在我们制作动画（我们滚动 800px 到第 3 项）

$(#gallery ul).animate(right: -800);

HTML

<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li> <--!The  User will see this big picture now -->
</ul>
</div>

Javascript

$('#gallery ul li').erase the not see able < li> Item 1 </ li> from the list

应该是这样的：

HTML

<div id="gallery">
<ul>
<li>Item 3</li> <--!The  User will see this big picture now  and Item 1 is gone-->
</ul>
</div>

用户点击拇指 2

将第 2 项从#pool 吸引到图库！但不要将其放在第 3 项下方 - 不要将其放在第 3 项上方，这样我们可以向左滚动而不是向右滚动

应该是这样的：

HTML

<div id="gallery">
<ul>
<li>Item 2</li> <--! This is putted above < li> Item 3 < /li> -->
<li>Item 3</li> <--!The  User will see this big picture now  and Item 1 is gone-->
</ul>
</div>

现在我们制作动画（我们滚动 800px 到第 2 项）

$(#gallery ul).animate(right: 800);

用户现在只能看到第 2 项中的图像

Javascript

$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list

应该是这样的：

HTML

<div id="gallery">
<ul>
<li>Item 2</li> <--!The  User will see this big picture now  and Item 3 is gone-->
</ul>
</div>

Answer 1

您应该正确对齐您的代码。

There are 很多 jQuery plugins 和 tutorials 关于如何做到这一点。 Seriously, like, tons.