Basic jQuery carousel from scratch_问答_开发者

开发者 https://www.devze.com 2023-04-10 18:29 出处：网络

I would use one of the readily available jQuery plugins, but none of them fit my needs for this particular site.

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

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:

$("#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. As .remove()'s documentation says:

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

Your event handlers are being removed from the slides when you use .remove. Per the jQuery documentation (emphasis mine):

Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

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:

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. .prevAll() gets all previous siblings (but not remApp) and .andSelf() rejoins remApp to the collection. Then you append the whole collection to the end of the list.