ソース

javascript

(function($) {
  $.simpleSilider =function(element, options) {
    var defaults = {
          targetId  : 'slide',
          prevClass : 'prev',
          nextClass : 'next',
          easing    : 'linear',
          count     : 0,
          speed     : 500,
          slideUl   : '',
          slideList : '',
          mBottom   : '',
          maxCount  : ''
        }

    var plugin = this;
        plugin.settings = {}

    var $element = $(element),
        element = element;

    plugin.init = function() {
      plugin.settings    = $.extend({}, defaults, options);
      defaults.slideUl   = $('#' + defaults.targetId + ' > ul');
      defaults.slideList = $('li', defaults.slideUl);
      defaults.mBottom   = parseInt(defaults.slideList.css('margin-bottom'));
      defaults.maxCount  = defaults.slideList.length-2;
      defaults.slideAreaHeight     = parseInt($('#' + defaults.targetId).get(0).offsetHeight);
      defaults.slideContentsHeight = parseInt(defaults.slideUl.get(0).offsetHeight);

      $("." + defaults.prevClass).click(function(){
        if (defaults.count <= 0) return false;
        previewAction();
        return false;
      });
      $("." + defaults.nextClass).click(function(){
        if (defaults.count >= defaults.maxCount) return false;
        nextAction();
        return false;
      });
      sliderCallback();
    }


    /**
     * preview process action
     *
     */
    var previewAction = function() {
      defaults.count--;
      defaults.slideUl.animate({
        marginTop : parseInt(defaults.slideUl.css('margin-top'))+defaults.slideList.eq(defaults.count).get(0).offsetHeight+defaults.mBottom+'px'
      },defaults.speed,defaults.easing);
      sliderCallback();
    }

    /**
     * next process action
     *
     */
    var nextAction = function() {
      defaults.slideUl.animate({
        marginTop : parseInt(defaults.slideUl.css('margin-top'))-defaults.slideList.eq(defaults.count).get(0).offsetHeight-defaults.mBottom+'px'
      },defaults.speed,defaults.easing);
      defaults.count++;
      sliderCallback();
    }

    /**
     * slider callback method
     *
     * @param type (action type 'prev' or 'back')
     */
    var sliderCallback = function() {
    }
    plugin.init();
 }
 $.fn.simpleSilider = function(options) {
    return this.each(function() {
       if (undefined == $(this).data('simpleSilider')) {
          var plugin = new $.simpleSilider(this, options);
          $(this).data('simpleSilider', plugin);
       }
    });
 }
})(jQuery);

$(document).ready(function() {
  $.simpleSilider();
});

HTML

<div>
<p id="prev" class="alignC prev"><a href="#"><i class="icon-chevron-up"></i></a></p>
<div id="slide">
<ul>
<li>１  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>２  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>３  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>４  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>５  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>６  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>７  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>８  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>９  テキストテキストテキストテキストテキストテキストテキストテキストテキス>トテキストテキスト</li>
<li>１０ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１１ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１２ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１３ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１４ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１５ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１６ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１７ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１８ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>１９ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
<li>２０ テキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキスト</li>
</ul>

<div id="fade"></div>
</div>
<p id="next" class="alignC next"><a href="#"><i class="icon-chevron-down"></i></a></p>
</div>

CSS

#slide {
  width:600px;
  height: 262px;
  overflow: hidden;
}
#slide ul {
  list-style: none;
  width:600px;
}
#slide ul li {
  display: block;
  margin:5px;
}
#slide #fade {
  bottom:0;
  width:600px;
  height:60px;
  z-index:1;
}
p#prev,p#next {
  border: 1px solid #000;
}