Question

上有一个滑块

当我点击某个项目时，所有图像都应该旋转。只需点击一下就可以了。接下来不太好。我已经在console.log中写了并找到历史数据的副本。它应该每次都改变，但事实并非如此。

有什么想法吗？

Answer 1

好的，所以在检查了每次点击后图像没有旋转的原因后，我决定简化你的编码。您应该不需要重置任何值，就像您使用 reset_history（）函数一样，如果您将它们存储在数组中，就可以了。

您真正需要的是一个变量来跟踪当前面向前方的项目，您可以通过快速计算所需的“步骤”值和“索引” “您使用的是每个功能。

以下是编辑过的代码：

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进行了一些更改。这只是为了能够看到更多关于元素的内容。

我希望这对您的原始代码有所帮助并且不会太远！

jQuery动画滑块

1 个答案: