Создание простого слайд-шоу

Question

Создание простого слайд-шоу

0

Я пытаюсь создать очень простое слайд-шоу, пройдя DOM. На данный момент я могу найти первый слайд, исчезнуть и исчезнуть в следующем. Однако он работает только один раз.

http://jsfiddle.net/tmyie/fEEu6/3/

$('.img').first().siblings('.img').hide();
$('.next').click(function () {
    $(this).siblings('.slides').children('.img:first-child').fadeOut().next().fadeIn();

});

<div class="container">
    <div class="slides">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
    </div>
    <div class="next">&rarr;</div>
</div>

Кто-нибудь знает, почему он работает только на одном слайде, и только до 3? Я использую это как учебное упражнение, поэтому любая помощь будет отличной.

nick 18 дек. 2013, в 23:52

Источник

Теги:

javascript

jquery

dom

traversal

3 ответа

0

Я считаю, что это не работает, потому что вы используете ": First-child",

$(this).siblings('.slides').children('.img:first-child').fadeOut().next().fadeIn();

С помощью этого кода он всегда будет исчезать первым ребенком и исчезать следующим. Однако после первого хода 1-й ребенок уже скрыт, а второй ребенок уже отображается, вы не увидите никакой разницы.

Может быть, вы можете попробовать добавить фиктивный класс

JQuery

if( $(this).siblings('.slides').children('.img.dummyClass').next().length  )
    $(this).siblings('.slides').children('.img.dummyClass').fadeOut().removeClass('dummyClass').next().fadeIn().addClass('dummyClass');

HTML

<div class="container">
<div class="slides">
    <div class="img dummyClass">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
    <div class="img">4</div>
</div>
<div class="next">&rarr;</div>

ПРИМЕЧАНИЕ. Это не будет скользить мимо последнего слайда (из-за условия IF). Но поскольку это не является частью вашего вопроса, я проигнорировал возвращение к слайду 1.

добавленной

http://jsfiddle.net/9GZJm/1/

Nis 18 дек. 2013, в 21:04

0

вы можете добавить и удалить активный класс для img следующим образом:

$('.img').first().addClass('active').siblings('.img').hide();
$('.next').click(function () {
    $(this).siblings('.slides').children('.active').fadeOut().removeClass('active').next().addClass('active').fadeIn();

});

oded 18 дек. 2013, в 20:37

Ещё вопросы

nick · Accepted Answer · 2013-12-18T20-19-00.000Z

Просто перейдите, через что.img видно.

$('.next').click(function(){
   $(this).closest('.container').find('.slides > .img:visible').hide().next().fadeIn();
});

Если вы хотите вернуться, просто мы.prev() вместо.next()

Что будет после последнего слайда? Это будет пустым! Это часть граничного условия, которое всегда следует проверять.