jQuery 动画滑块

Question

我在http://jsfiddle.net/aXVFR/ 上有一个滑块

当我点击一个项目时，所有图像都应该旋转。只需单击一下，它就可以正常工作。下一个不太好。我已经在 console.log 中写入并找到历史数据的重复项。它应该每次都改变，但它不会。

有什么想法吗？

Answer 1

好的，所以在检查了为什么每次点击图片都没有旋转之后，我决定稍微简化一下代码。如果您将它们存储在数组中，那么您实际上不需要重置任何值，就像您使用 reset_history() 函数所做的那样。

您真正需要的是一个变量来跟踪当前的正面项目，您可以通过快速计算获得所需的“step”值和“index ”您在 each 函数中使用。

这里是修改后的代码：

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 进行了一些更改。这只是为了能够看到更多元素正在发生的事情。

我希望这对您有所帮助，并且与您的原始代码相差不远！