jQuery анимационный слайдер - PullRequest
Новая
       11

jQuery анимационный слайдер

1 голос
/ 26 января 2012

У меня есть слайдер на http://jsfiddle.net/aXVFR/

Когда я нажимаю на элемент, все изображения должны вращаться. С ОДНИМ щелчком все работает нормально. Следующая не очень хорошая. Я написал в console.log и нашел дубликаты исторических данных. Это должно меняться каждый раз, но это не так.

Есть идеи?

1 Ответ

2 голосов
/ 26 января 2012

Хорошо, поэтому, проверив, почему изображения не вращаются при каждом нажатии, я решил немного упростить ваш код.Вам не нужно действительно сбрасывать какие-либо значения, как вы делали с помощью функции reset_history () , если они хранятся в массивах, что вы и сделали.

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

Вот отредактированный код: 

jQuery(document).ready(function($) {
    var side_item_count = 2;
    // ADDED CURRENT ITEM VAR
    var currItem = 1;
    var item_count = $("#showcase li").size();
    var history_width = get_history_width();
    var history_height = get_history_height();
    var history_margin = get_history_css("margin");
    var history_zindex = get_history_css("zindex");

    console.log(history_width);
    console.log(history_height);
    console.log(history_margin);

    // REMOVED get_next_index() THROUGHOUT TO SIMPLIFY SPECIFIC CALCULATIONS
    $("#showcase li").live("click", function(){
        if(currItem == item_count){
            currItem = 1;
        }else{
            currItem++;
        }
        step_loop( currItem );
    });

    function step_loop(this_index) {
        $('#showcase li').each(function(index) {
            counter = index + 1;
            step_animate(this_index, counter);
        });
    }

    function step_animate( current_index, counter ) {
        // NEW CALCULATION USING currItem TO WORKOUT NEW ITEM POSITION
        current_object = $('#showcase li:nth-child(' + counter + ')');
        next_index = counter + 1 - currItem;
        if((counter - currItem) < 0){
            next_index = (counter - currItem) + item_count + 1;
            console.log("-- " + next_index);
        }else{
            console.log(counter + " + 1 - " + currItem + " = " + next_index);
        }

        // ADDED NEW VAR next_zindex 
        var next_width = history_width[next_index];
        var next_height = history_height[next_index];
        var next_margin = history_margin[next_index];
        var next_zindex = history_zindex[next_index];

        // ADDED ZINDEX CHANGE BEFORE ANIMATION
        $(current_object).css("zIndex", next_zindex).animate({
            marginLeft: next_margin,
            width: next_width,
            height: next_height,
            }, 500, function() {
                // Animation complete.
        });
    }

    function get_history_width() {
        var width = new Array();
        $('#showcase li').each(function(index) {
            counter = index + 1;
            width[counter] = $('#showcase li:nth-child(' + counter + ')').css('width');
        });
        return width;
    }
    function get_history_height() {
        var height = new Array();
        $('#showcase li').each(function(index) {
            counter = index + 1;
            height[counter] = $('#showcase li:nth-child(' + counter + ')').css('height');
        });
        return height;
    }

    // CHANGED get_history_margin TO SERVE ZINDEX VALUES AS WELL 
    function get_history_css(property) {
        var margin = new Array();
        var zindex = new Array();
        $('#showcase li').each(function(index) {
            counter = index + 1;
            margin[counter] = $('#showcase li:nth-child(' + counter + ')').css('marginLeft');
            zindex[counter] = $('#showcase li:nth-child(' + counter + ')').css('zIndex');
        });
        switch(property){
            case "margin":
                return margin;
                break;
            case "zindex":
                return zindex;
                break;
        }
    }
});

Вот живой пример на jsfiddle: http://jsfiddle.net/aXVFR/3/

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

Надеюсь, это полезно и не слишком далеко от вашего исходного кода!

...