Базовая jQuery карусель с нуля - PullRequest
Новая
       5

Базовая jQuery карусель с нуля

0 голосов
/ 06 октября 2011

Я бы использовал один из доступных плагинов 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>

Это берет изображение, которое вы щелкнули и удаляет его, затем добавляет его в конец. Мне нужно, чтобы взять каждое из предыдущих изображений и добавить их.

Кроме того, похоже, есть одноразовое правило. Я могу заставить каждое изображение идти один раз, но потом ничего не происходит.

Вы можете увидеть это в «действии» здесь

Ответы [ 2 ]

1 голос
/ 06 октября 2011

Есть две возможные проблемы (решение одной из них должно помочь), вытекающие из того факта, что события связаны с элементами, а когда элементы удаляются и добавляются снова, события больше не связаны с элементами , Другими словами, вы удаляете элемент из 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 () вместо этого.

0 голосов
/ 06 октября 2011

Ваши обработчики событий удаляются со слайдов при использовании .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 в коллекцию.Затем вы добавляете всю коллекцию в конец списка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...