jquery滑塊邏輯

我知道那裏有大量的滑塊，我想要做的事情就像是Coda-Slider，但是我想學習JavaScript（jQuery）並使用我所擁有的而不是更改所有HTML代碼到現有的滑塊所需的語法。jquery滑塊邏輯

我最大的問題之一是，我覺得簡單的事情太複雜了，希望能夠輕鬆解決複雜的問題。

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的基礎知識，但大多數時候，我可以繪製一個方案需要什麼樣的事件和動作，但我完全勉強把它變成代碼。

感謝您的任何幫助和建議！

來源

2011-03-22 Bay

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); 
     }); 
    }); 
});

來源

2011-03-22 12:15:38

非常感謝！我明白了。希望我能通過多練習來學習這種想法。 – Bay 2011-03-22 13:25:19

jquery滑塊邏輯

回答

相關問題