jQueryでコンテンツスライダープラグインを作ってみた

ちょうどするものを見つけることができなかったので、良い機会だから自作してみた。

とりあえず要件はこんな感じ

• 上下ボタンで１件ずつスライド。
• 次にスライドされる高さに合わせてスライド。
• スライドスピードとかアニメーションの種類は設定ファイルで変えられるようにした。
• jQueryプラグインなので、jQuery必須

ソース(jquery.simpleSlider.js)

(function($) {
$.simpleSilider =function(element, options) {
var defaults = {
targetId : 'slide',
prevClass : 'prev',
nextClass : 'next',
easing : 'linear',
count : 0,
speed : 100,
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).attr('offsetHeight'));
defaults.slideContentsHeight = parseInt(defaults.slideUl.attr('offsetHeight'));

$("." + defaults.prevClass).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).attr('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).attr('offsetHeight')-defaults.mBottom+'px'
},defaults.speed,defaults.easing);
defaults.count++;
sliderCallback();
}

/**
* slider animation 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);

使い方

１．必要ファイルを記述

<script type="text/javascript" src="/jquery.js"></script><script type="text/javascript" src="/jquery.simpleSlider.js"></script>

２．利用するhtmlの上部に以下を記述する

<script type="text/javascript">// <![CDATA[
 $(document).ready(function() { $.simpleSilider();});
// ]]></script>

３．htmlを記述

<div id="slide">
<ul>
<li>スライドされる内容</li>
<li>スライドされる内容</li>
<li>スライドされる内容</li>
</ul>
</div>

プラグインを作るのは敷居が高いイメージがあったけど、実際作ってみるとそこまで難しくなかった。
というかそこまでのものを作っていないだけなのだけど。。

サンプルとかまとめておけるページ作るかなー

2012.5.8追記
サンプルとかまとめておけるページ作ったので、そこでデモを用意しました。
jQueryを利用した、コンテンツスライダー – サンプルとか