Вопрос по javascript, jquery, css – Как переместить элемент карусели в середину, когда он щелкает в jquery

1

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

Это то, что я сделал до сих пор: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>
Ваша карусель всегда показывает только три предмета или может быть больше? Tina CG Hoehr
Это может быть любое число, но для этого примера только 3. Я просто хочу что-то, чтобы дать мне преимущество, тогда я могу адаптировать это позже ... Shaoz

Ваш Ответ

2   ответа
1

Хорошо, это ужасно, я надеюсь, что это даст вам некоторые идеи.

Я создал глобальныйcurrentItem это отслеживает то, что находится в центре. Каждый раз, когда карусель движется, это обновляется.

Я нашел очень полезную переменнуюselfPosLeft который сказал мне, что нажимали. Я должен добавить, что90 было многократным, которое я получил от щелчка вокруг. Должен быть связан с вашим CSS, и я не знаю, как найти это число динамически.

Пожалуйста, попробуйте :)http://jsfiddle.net/sp9Jv/4/

Ну, я представляю, что когда у вас есть более 3 элементов, вы можете изменить код, чтобы вычислить разницу между текущим элементом иselfPosLeft из того, что нажали, я оставлю это вам :) Как это, похоже, работает.http://jsfiddle.net/sp9Jv/5/

Спасибо @Mia DiLorenza, это работает ... Я ценю ваш ответ и усилия ... Shaoz
3

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

Вот моя модификация:

и с этой функцией я связал действие click для карусельных элементов и передал элемент clicked с помощью ключевого слова self.

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);
};

Вы можете проверить это, работая по этому URL:http://jsfiddle.net/rUZHg/3/

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

Спасибо @ mhh1422, это то, что я искал ... И это работает ... Shaoz

Похожие вопросы