jquery滑块逻辑

Question

我知道那里有大量的滑块，我想要做的事情就像是Coda-Slider，但是我想学习JavaScript（jQuery）并使用我所拥有的而不是更改所有HTML代码到现有的滑块所需的语法。

我最大的问题之一是，我觉得简单的事情太复杂了，希望能够轻松解决复杂的问题。

sketch

var shopContent = $('div.tx-jfmulticontent-pi1'); 
var shopTrigger = $('div.shop-items > div'); 

for(var i=0; i < shopTrigger.length; i++) { 
    $(shopTrigger[i]).click(function(){ 
     $(shopContent[i]).slideUp();        
    }); 
} 

我的想法是：使用点击项目的（触发格）指数与相应指数的动画内容股利。显然，当我用console.log检查我的值时，自for循环快速通过后，我得到12（触发器项数）！

如果你能给我一些指导，我应该开始学习如何解决这些问题，我将不胜感激。不知道，也许我不得不回到JavaScript的基础知识，但大多数时候，我可以绘制一个方案需要什么样的事件和动作，但我完全勉强把它变成代码。

感谢您的任何帮助和建议！

Answer 1

• DEMO：http://jsbin.com/odeta3/2

这是一个非常简陋的demo，但是您可以通过使用

<div id="container"> 
<div id="display-image"></div> 
<ul id="display-thumbs"> 
<li><img /></li><li><img /></li><li><img /></li><li><img /></li> 
</ul> 
</div> 

的想法

，你可以很容易地做到这一点

---

$(function() { 
    $('#display-thumbs li img:first').clone(true).appendTo('#display-image'); 
    $('#display-thumbs li img').click(function() { 
     var image = this.src; 
     $('#display-image img').animate({ 
      'top': '-425px' 
     }, 
     500,function() { 
      $(this).remove(); 
      $('<img></img>').attr('src', image).css('top', '425px').appendTo('#display-image').animate({ 
       'top': '0' 
      }, 
      500); 
     }); 
    }); 
});