jQuery 动画滑块

Posted 2023-05-08

【中文标题】jQuery 动画滑块

【英文标题】：jQuery animate slider

【发布时间】：2012-02-19 12:42:51

【问题描述】：

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

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

有什么想法吗？

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

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

【讨论】：

它就像魔术一样工作。美丽的！当我检查代码时，我会接受这个答案。非常感谢！

好东西。很高兴我能帮忙:)