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="/bg#" id="previous">previous</a> <a href="/bg#" 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