Come posso fare js che deve dinamica input manuale?

Question

Io in realtà non so come chiedere questo, così ho scritto lo script qui: http://jsbin.com/acaxi/edit
E 'piuttosto semplice, sto cercando di creare pannelli scorrevoli.

So che ci sono un sacco di script che lo fa bene, ad essere onesti ci sono troppi.

Se qualcuno pensa che ci sia un plugin si potrebbe raccomandare al posto del mio script quindi si prega di fare la parte!

Answer 1

Non sono ancora sicuro di quello che la tua domanda è, ma ho rielaborato il codice un po 'per farlo funzionare con qualsiasi numero di pannelli di alimentazione ( aggiornato 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 });

});

---

Per aggiungere i feed in modo dinamico avrete bisogno di uno allegare una funzione di click per ogni nuovo feed aggiunto o utilizzare il jQuery .Live) gestore di eventi (. Ho optato per il metodo precedente. Ecco il aggiornato demo , e il codice:

$(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') } );
}