addClass .next() .prev() слайд-шоу не будет работать

Я хотел бы сделать небольшое слайд-шоу с jquery. Первая проблема: если у меня есть только «функция следующего щелчка», изображения отображаются правильно одно за другим. Но если я использую функцию «предыдущая», кнопка «Далее» больше не будет работать. Другая проблема: слайд-шоу должно начинаться снова с первого изображения, нажав кнопку «Далее» после последнего изображения. Может быть, у кого-то есть идея. заранее спасибо.

         $("#next").click(function(){
            if($("#gallery li").next("#gallery li").length != 0) {
                var next = $(".toppicture").parent("li").next().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(next).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

        $("#prev").click(function(){
            if($("#gallery li").prev("#gallery li").length != 0) {
                var prev = $(".toppicture").parent("li").prev().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(prev).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

"ul" с идентификатором "gallery" выглядит так:

    <li>
<img class="toppicture" src="images/w1.jpg" title="Title #0"/>
    </li>
    <li>
<img  src="images/w2.jpg" title="Title #1"/>
    </li>
    <li>
<img  src="images/w3.jpg" title="Title #2"/>
    </li>

jquery slideshow addclass removeclass
person D.Steinel    schedule 19.02.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это не самый простой слайдер, но я думаю, что его проще всего понять. jsFiddle

HTML:

<ul id="gallery">
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li>
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li>
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li>
</ul>
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a>

JS:

function loadSlide(index){
    $('#gallery li').hide()
        .eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + 1) % numSlides;    
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();            
});
$('#previous').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + numSlides - 1) % numSlides;
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();
});

Это позволяет избежать большого количества обходов (например, вашего фиаско .next()) путем разделения ролей.

  • Смена слайдов осуществляется функцией, она принимает номер и показывает этот слайд.

  • Текущий номер слайда сохраняется в самой галерее с помощью .data()

  • Кнопки «Далее» и «Предыдущий» просто должны получить текущий слайд и соответственно увеличить или уменьшить это число, а затем вызвать средство смены слайдов.

Таким образом, вы можете легко расширить любую конкретную область. Хотите переход? Поместите его в слайд-чейнджер. Хотите, чтобы слайды автоматически менялись? Установите таймер для вызова смены слайдов.

Единственное, что отличает это решение от полнофункционального слайдера, это то, что обычно вы инкапсулируете все вместе и используете настраиваемые события, а не функцию для смены слайда. Я был бы рад немного расширить этот пример, чтобы показать вам разницу, если хотите.

person Sinetheta    schedule 20.02.2012
comment
Большое спасибо!! очень красивый сценарий! именно то, что мне нужно. Единственное, что изображения не совсем на одной линии. Похоже, это проблема стиля списка. Когда я перехожу к следующему изображению, следующее изображение находится немного правее. Есть ли какой-нибудь трюк, с помощью которого каждое изображение остается на одной строке? - person D.Steinel; 20.02.2012
comment
на вашем сайте или на этой скрипке? На этой скрипке вообще ничего не должно двигаться, если вы дадите ссылку на свой сайт, я могу помочь вам отладить css - person Sinetheta; 20.02.2012
comment
Я исправил проблему, дав первому изображению левое поле. - person D.Steinel; 20.02.2012

arrow_upward
0
arrow_downward

Вот вам пример в jsFiddle

Итак, вам нужно что-то вроде карусели. Есть несколько подключаемых модулей jQuery для обработки этого эффекта, например этот: jCarousel от Sorgalla.com

person Rafael Verger    schedule 20.02.2012
comment
Большое спасибо за вашу помощь, но это не совсем то, что я искал. - person D.Steinel; 20.02.2012