Pytanie w sprawie css, jquery, javascript, carousel – Jak przenieść element karuzeli na środek, gdy zostanie kliknięty w jquery

1

Jak sprawić, aby karuzela wyśrodkowała element, który kliknąłem na środku? Szukałem wszędzie odpowiedzi, ale nie są to proste odpowiedzi ... Czy ktoś może mi w tym pomóc?

To właśnie zrobiłem do tej pory:http://jsfiddle.net/sp9Jv/

HTML:

<code><div id="wrapper">
    <div id="carousel">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>

        <div class="viewport">
            <ul>
                <li><a href="#">Un</a></li>
                <li><a href="#">Deux</a></li>
                <li><a href="#">Trois</a></li>
                <li><a href="#">Quatre</a></li>
                <li><a href="#">Cinq</a></li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Sept</a></li>
                <li><a href="#">Huit</a></li>
            </ul>
        </div>
        <!-- viewport -->

    </div>
    <!-- carousel -->
</div>
<!-- wrapper -->
</code>

JavaScript:

<code>var carousel = $('#carousel'),
    prev = carousel.find('.prev'),
    next = carousel.find('.next'),
    viewport = carousel.find('.viewport'),
    item = viewport.find('li'),
    itemWidth = item.outerWidth(true),
    itemNum = item.length,
    itemList = viewport.find('ul');

itemList.width(itemWidth * itemNum);

var moveCarousel = function(dir) {
    itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
};

//prev
prev.on('click', function(e) {
    e.preventDefault();
    moveCarousel(-1);
});

//next
next.on('click', function(e) {
    e.preventDefault();
    moveCarousel(1);
});

//carousel item
item.on('click', 'a', function(e) {
    var self = $(this),
        selfIndex = self.index(),
        distance = itemList.width() / 2,
        selfPos = self.position(),
        selfPosLeft = selfPos.left,
        viewportPosLeft = viewport.position().left;

    e.preventDefault();

    //move item to middle, but it doesn't work... 
    if (selfPosLeft > Math.floor(viewport.width())/3) {
        itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
    }

    if (selfPosLeft < Math.floor(viewport.width())/3) {
        itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
    }
});
</code>

CSS:

<code>#wrapper {
    width: 500px;
    margin: 20px auto;
}
#carousel {
    position: relative;
}
.viewport {
    width: 260px;
    border: 1px solid #6e6e6e;
    height: 80px;
    overflow: hidden;
    position: relative;
    margin-left: 100px;
}
.prev, .next {
    position: absolute;
}
.prev {
    top: 20px;
    left: 0;
}
.next {
    top: 20px;
    right: 0;
}

.viewport ul {
    position: absolute;
}
.viewport li {
    float: left;
    margin-right: 10px;
}
.viewport li a {
    display: block;
    width: 80px;
    height: 80px;
    background: #ddd;
}
</code>
Może to być dowolna liczba, ale w tym przykładzie tylko 3. Chcę tylko, żeby coś mi dało głowę, a potem mogę ją później dostosować ... Shaoz
Czy karuzela zawsze pokazuje tylko trzy przedmioty, czy może więcej? Tina CG Hoehr

Twoja odpowiedź

2   odpowiedź
3

Przygotowując wszystkie potrzebne informacje o wszystkich przedmiotach, możesz obliczyć wartość lewej strony na podstawie klikniętego przedmiotu.

Oto moja modyfikacja:

i za pomocą tej funkcji związałem działanie kliknięcia elementów karuzeli i przekazałem kliknięty element za pomocą słowa kluczowego siebie.

<code>var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};
</code>

Możesz to sprawdzić działając na tym adresie URL:http://jsfiddle.net/rUZHg/3/

Zakładam, że powinno to działać pomimo liczby wyświetlanych elementów podczas obliczania wypełnienia między lewym 0 a lewym elementem centralnym.

Dziękuję @ mhh1422, tego właśnie szukałem ... I to działa ... Shaoz
1

W porządku, to brzydkie, mam nadzieję, że da ci kilka pomysłów.

Stworzyłem globalnycurrentItem który śledzi to, co znajduje się w centrum. Za każdym razem, gdy karuzela się porusza, jest aktualizowana.

Bardzo użyteczną zmienną, którą znalazłem, byłaselfPosLeft który powiedział mi, co zostało kliknięte. Powinienem to dodać90 była wielokrotnością, którą otrzymałem od kliknięcia. Musi być połączony z Twoim CSS i nie wiem, jak dynamicznie znaleźć ten numer.

Spróbuj :)http://jsfiddle.net/sp9Jv/4/

Cóż, wyobrażam sobie, że gdy masz więcej niż 3 przedmioty, możesz zmienić kod, aby obliczyć różnicę między bieżącym aselfPosLeft z klikniętego, zostawię to tobie :) W ten sposób wydaje się działać.http://jsfiddle.net/sp9Jv/5/

Dziękuję @Mia DiLorenza, to działa ... Doceniam twoją odpowiedź i wysiłek ... Shaoz

Powiązane pytania