jQuery的动画滑块

Question

我有http://jsfiddle.net/aXVFR/

滑块当我点击所有的图像应该旋转项目。点击一下就可以正常工作。下一个不太好。我写了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。这只是为了能够看到更多关于元素的内容。

我希望这是有帮助的，不要太离开你的原始代码！