ソース

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