我該如何製作需要手動輸入動態的js？

Question

我真的不知道該怎麼問，所以我在這裏寫下了這個腳本： http://jsbin.com/acaxi/edit
這很簡單，我試圖創建滑動面板。

我知道有很多腳本能夠做到這一點，老實說有太多腳本。

如果有人認爲有一個插件，你可以推薦，而不是我的腳本，那麼請分享！

Answer 1

我仍然不確定你的問題是什麼，但我重新編寫了一段代碼，使其可以與任意數量的供稿面板（updated demo）配合使用。

$(document).ready(function(){ 

    var feeds = $('#feeds div'), 
     numFeeds = feeds.length; 

    feeds 
    .click(function(){ 
     $(this) 
     .animate({"margin-left": "-200px", opacity: 0}, "fast") 
     .animate({"margin-left": "200px"}, "fast"); 
     // add 2 since the id isn't zero based 
     var next = ($(this).index() + 2 > numFeeds) ? 1 : $(this).index() + 2; 
     $('div#feed' + next).animate({"margin-left": 0, opacity: 1}, "fast") 
    }) 
    .nextAll().css({ 'margin-left' : '200px', opacity : 0 }); 

}); 

---

添加提要動態，你要麼需要附加一個點擊功能添加到每個新飼料或使用jQuery的.live（）事件處理程序。我選擇了以前的方法。這裏是updated demo，代碼：

$(document).ready(function(){ 

    var feeds = $('#feeds .feeds'), 
     numFeeds = feeds.length; 

    // initialize 
    feeds 
    .click(function(){ animateFeed(this, numFeeds); }) 
    .nextAll().css({ 'margin-left' : '200px', opacity : 0 }); 

    // add another feed 
    $('.addFeed').click(function(){ 
    $('<div id="feed' + (numFeeds++ +1) + '" class="feeds">' + numFeeds +'</div>') 
    .click(function(){ animateFeed(this, numFeeds); }) 
    .css({ 'margin-left' : '200px', opacity : 0 }) 
    .appendTo(feeds.parent()); 
    $('#num').text(numFeeds); 
    }) 

}); 

// animate feed panel 
function animateFeed(el, num){ 
var indx = $(el).index(), 
    next = (indx + 1) % num; 
$('.feeds').removeClass('active'); 
$(el) 
    .animate({ marginLeft : '-200px', opacity: 0}, 'fast') 
    .animate({ marginLeft : '200px'}, 'fast'); 
$('.feeds:eq(' + next + ')').animate({ marginLeft : 0, opacity : 1}, 'fast', function(){ $(this).addClass('active') }); 
}