从头开始的基本 jQuery 轮播
我会使用现成的 jQuery 插件之一，但它们都不符合我对这个特定站点的需求。
这是我到目前为止所拥有的代码：
<!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>
这将获取您单击的图像并将其删除，然后将其附加到末尾。我需要它来拍摄之前的每张图像并附加它们。
而且，它似乎有一个一次性规则。我可以让每个图像都播放一次，但然后什么也没有发生。
您可以在此处的“action”中看到它
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于事件绑定到元素，并且当删除并再次添加元素时，事件不再绑定到元素，因此可能会出现两个问题（解决其中一个应该会有所帮助）。换句话说，您从 DOM 中删除该元素并删除附加的事件，但是当您再次将它们插入 DOM 中时，事件不会重新附加。
有两种方法可以修复它：
不要将事件附加到元素，而是附加到容器，然后委托事件（使用 jQuery 的
.delegate()函数）到您需要的元素，例如像这样：删除元素时，使用
.detach()< /a>，而不是.remove()jQuery 的函数 - 它将删除元素而不删除事件。正如.remove()的文档所述：<块引用>
与 .empty() 类似，.remove() 方法从
DOM。当您还想删除元素本身时，请使用 .remove()
和里面的一切一样。除了元素本身之外，所有
与元素关联的绑定事件和 jQuery 数据将被删除。
要删除元素而不删除数据和事件，请使用 .detach()
相反。
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.
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. like that:when removing the elements, do it using
.detach(), not.remove()jQuery's function - it will remove the elements without deleting the events. As.remove()'s documentation says:当您使用
.remove时，您的事件处理程序将从幻灯片中删除。根据 jQuery 文档（重点是我的）：但我不会删除它或拆开它。只需追加它，jQuery 就会自动将它放在最后。由于您也想将所有以前的兄弟移动到末尾，因此您需要这样：
请注意，我删除了
.remove命令并添加了.prevAll().andSelf()到remApp。.prevAll()获取所有先前的同级（但不是remApp），并且.andSelf()将remApp重新加入到收藏。然后将整个集合附加到列表的末尾。Your event handlers are being removed from the slides when you use
.remove. Per the jQuery documentation (emphasis mine):I wouldn't remove it or detatch it though. Just append it and jQuery will automatically put it at the end. Since you want to move all previous siblings to the end too, you want this:
Note that I removed the
.removecommand and I added.prevAll().andSelf()toremApp..prevAll()gets all previous siblings (but notremApp) and.andSelf()rejoinsremAppto the collection. Then you append the whole collection to the end of the list.