从零开始的基本jQuery轮播

Question

I would use one of the readily available jQuery plugins, but none of them fit my needs for this particular site. 我将使用一种易于使用的jQuery插件，但是它们都不符合我对该特定站点的需求。

This is the code that I have so far: 这是我到目前为止的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript" src="js/pushState.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#nav a.slide").click(function() {
        var img = $(this).children('img').attr('src');
        $('#content').hide().css({ 'background':'url('+ img +') no-repeat 50% 50%' }).fadeIn('3000');
        var remApp = $(this).prev('a.slide');
        remApp.remove();
        $("#nav").append(remApp);
    });
});

</script>
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
}
#content {
position: absolute;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
z-index: 1;
}
#nav {
position: absolute;
top: 70%;
z-index: 3;
}
#nav a.slide {
margin: 0 20px 0 0;
text-decoration: none;
}
#nav .slide img {
width: 100px;
height: 85px;
}
</style>

</head>

<body>
<div id="content">


</div>
<div id="social_links">

</div>
<div id="nav">

<a href="#" class="slide">
<img src="images/slide1.gif" />
</a>

<a href="#" class="slide">
<img src="images/slide2.jpg" />
</a>

<a href="#" class="slide">
<img src="images/slide3.jpg" />
</a>

<a href="#" class="slide">
<img src="images/slide4.jpg" />
</a>

<a href="#" class="slide">
<img src="images/slide5.png" />
</a>
</div>

</body>
</html>

This takes the image that you click on and removes it, then appends it to the end. 这将获取您单击的图像并将其删除，然后将其附加到末尾。 I need it to take each of the previous images and append them. 我需要它来拍摄每个先前的图像并将其附加。

Also, it seems to have a one-time rule. 另外，它似乎有一个一次性规则。 I can make each of the images go once, but then nothing happens. 我可以让每张图片放一次，但是什么也没发生。

You can see it in "action" here 你可以看到它在“行动” 在这里

Answer 1

There are two possible issues (solving one of them should help) resulting from the fact, that the events are bound to the elements, and when the elements are removed and added again, the events are not bound to the elements any more. 由于事件绑定到元素，因此有两个可能的问题（解决其中一个应该有所帮助），并且当元素被删除并再次添加时，事件不再绑定到元素。 In other words you remove the element from the DOM along with deleting the events attached, but when you insert them in the DOM again, the events are not re-attached. 换句话说，您从DOM中删除了该元素，同时删除了所附加的事件，但是当您再次将其插入DOM中时，这些事件不会重新附加。

There are two ways you can fix it: 有两种解决方法：

do not attach events to the elements, but to the container, and then delegate the events (using jQuery's .delegate() function) to the elements you need, eg. 不要将事件附加到元素，而是附加到容器，然后将事件（使用jQuery的.delegate()函数）委托给所需的元素，例如。 like that: 像那样：
```
 $("#nav").delegate('a.slide', 'click', function() { var img = $(this).children('img').attr('src'); $('#content').hide().css({ 'background':'url('+ img +') no-repeat 50% 50%' }).fadeIn('3000'); var remApp = $(this).prev('a.slide'); remApp.remove(); $("#nav").append(remApp); }); 
```
when removing the elements, do it using .detach() , not .remove() jQuery's function - it will remove the elements without deleting the events. 删除元素时，请使用.detach()而不是.remove() jQuery的功能-它将删除元素而不删除事件。 As .remove() 's documentation says: 如.remove()的文档所述：

Similar to .empty(), the .remove() method takes elements out of the DOM. 与.empty（）相似，.remove（）方法将元素移出DOM。 Use .remove() when you want to remove the element itself, as well as everything inside it. 要删除元素本身以及其中的所有内容时，请使用.remove（）。 In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. 除了元素本身之外，所有绑定的事件和与元素相关联的jQuery数据都将被删除。 To remove the elements without removing data and events, use .detach() instead. 要删除元素而不删除数据和事件，请改用.detach（）。

Answer 2

Your event handlers are being removed from the slides when you use .remove . 使用.remove时，将从幻灯片中删除事件处理程序。 Per the jQuery documentation (emphasis mine): 根据jQuery文档（重点是我的）：

Use .remove() when you want to remove the element itself, as well as everything inside it. 要删除元素本身以及其中的所有内容时，请使用.remove() 。 In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. 除了元素本身之外， 所有绑定的事件和与元素相关联的jQuery数据都将被删除。 To remove the elements without removing data and events, use .detach() instead. 要删除元素而不删除数据和事件，请改用.detach（） 。

I wouldn't remove it or detatch it though. 我不会删除它或将其分离。 Just append it and jQuery will automatically put it at the end. 只需追加它，jQuery就会自动将其放在末尾。 Since you want to move all previous siblings to the end too, you want this: 由于您也希望将所有以前的兄弟姐妹都移到末尾，因此您需要这样做：

var remApp = $(this).prev('a.slide');
$("#nav").append(remApp.prevAll().andSelf());

Note that I removed the .remove command and I added .prevAll().andSelf() to remApp . 请注意，我除去.remove命令和我添加.prevAll().andSelf()到remApp 。 .prevAll() gets all previous siblings (but not remApp ) and .andSelf() rejoins remApp to the collection. .prevAll()获取所有先前的同级兄弟（但不remApp ） .andSelf() remApp重新加入到集合中。 Then you append the whole collection to the end of the list. 然后，将整个集合附加到列表的末尾。

从零开始的基本jQuery轮播

问题描述

2 个解决方案

解决方案1
1 2011-10-05 20:19:42

解决方案2
0 已采纳 2011-10-05 20:12:07

从零开始的基本jQuery轮播

问题描述

2 个解决方案

解决方案1 1 2011-10-05 20:19:42

解决方案2 0 已采纳 2011-10-05 20:12:07

解决方案1
1 2011-10-05 20:19:42

解决方案2
0 已采纳 2011-10-05 20:12:07