Question

我会使用一个现成的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>

这会获取您单击的图像并将其删除，然后将其附加到最后。我需要它来拍摄以前的每个图像并附加它们。

此外，它似乎有一次性规则。我可以让每张图片都去一次，但之后什么也没发生。

您可以在“动作”here

中看到它

Answer 1

有两个可能的问题（解决其中一个应该有帮助），因为事件是绑定到元素的事实，当元素被删除并再次添加时，事件不再绑定到元素。换句话说，您从DOM中删除元素以及删除附加的事件，但是当您再次将它们插入DOM时，事件不会重新附加。

有两种方法可以解决它：

不要将事件附加到元素，而是附加到容器，然后将事件（使用jQuery的.delegate()函数）委托给您需要的元素，例如。那样：

$("#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);
});

删除元素时，使用.detach()，而不是.remove() jQuery的函数来执行 - 它将删除元素而不删除事件。正如.remove()的文档所说：

与.empty（）类似，.remove（）方法将元素取出 DOM。如果要删除元素本身，请使用.remove（）作为里面的一切。所有元素本身除了元素本身绑定事件和与元素关联的jQuery数据将被删除。 要删除元素而不删除数据和事件，请使用.detach（）代替。

Answer 2

使用.remove时，您的事件处理程序将从幻灯片中删除。根据jQuery文档（强调我的）：

如果要删除元素本身及其中的所有内容，请使用.remove()。除了元素本身之外，还删除了与元素关联的所有绑定事件和jQuery数据。要删除元素而不删除数据和事件，请改用 .detach（）。

我不会删除它或解除它。只需附加它，jQuery就会自动将它放在最后。既然你想把所有以前的兄弟姐妹都移到最后，你想要这个：

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

请注意，我删除了.remove命令，并将.prevAll().andSelf()添加到remApp。 .prevAll()将以前的所有兄弟姐妹（但不是remApp）和.andSelf()重新加入remApp到该集合。然后将整个集合追加到列表的末尾。

从头开始的基本jQuery轮播

2 个答案: