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

ProgramBox

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

Post author:admin
Запись опубликована:11 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #load #carousel

#javascript #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>

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

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

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

1. Какие функции вам нужны, которые недоступны в одном из существующих плагинов?

2. 1 за написание собственного.

3. Спасибо тост 🙂 @Clive, мне нужно написать свой собственный, потому что это такая инструментальная часть сайта, который я разрабатываю. Он должен иметь очень конкретные правила и функциональность.

Ответ №1:

Возможны две проблемы (решение одной из них должно помочь), возникающие в результате того факта, что события привязаны к элементам, и когда элементы удаляются и добавляются снова, события больше не привязываются к элементам. Другими словами, вы удаляете элемент из DOM вместе с удалением прикрепленных событий, но когда вы снова вставляете их в DOM, события не присоединяются повторно.

Есть два способа исправить это:

прикрепляйте события не к элементам, а к контейнеру, а затем делегируйте события (используя .delegate() функцию jQuery) нужным вам элементам, например. вот так:

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

Ответ №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 Затем вы добавляете всю коллекцию в конец списка.

1. Ура! Это сработало! Теперь как насчет того, чтобы проделать это с каждым слайдом, который находится перед тем, на который вы нажимаете?

2. @sun-tzu я не уверен, что понимаю. Что вам нужно сделать с каждым слайдом перед тем, на который вы нажимаете ?

3. То же самое, что он уже делает, только с каждым из них. Прямо сейчас он удаляет и добавляет только один элемент. Мне нужно, чтобы он принимал все элементы, которые находятся перед тем, на который нажимается. Я знаю, что в jQuery есть функция each() , но я не могу понять, как заставить это работать в этом случае.

4. @sun-tzu Ок, понял. Я обновил свой ответ. Не забудьте отметить это как ответ, если вам это нравится 🙂

5. ты мой герой, Джефф! Еще одна вещь, если это возможно… Есть ли какой-нибудь способ добавить к этому немного анимации, чтобы элемент вставлялся вместо тех, которые он удаляет?