ちょうどするものを見つけることができなかったので、良い機会だから自作してみた。
2012.04.11追記
offset値の取り方が、以下のやり方だとjQuery1.6以降動作しないということがわかりました。jQuery1.6以降は以下のように設定する必要があります。
jQuery1.6以前:
$(target).attr(“offsetHeight”)
$(target).attr(“offsetWidth”)jQuery1.6以降:
$(target).get(0).offsetHeight
$(target).get(0).offsetWidth
※DOMから取得するようにします。
offset値の取り方が、以下のやり方だとjQuery1.6以降動作しないということがわかりました。jQuery1.6以降は以下のように設定する必要があります。
jQuery1.6以前:
$(target).attr(“offsetHeight”)
$(target).attr(“offsetWidth”)jQuery1.6以降:
$(target).get(0).offsetHeight
$(target).get(0).offsetWidth
※DOMから取得するようにします。
とりあえず要件はこんな感じ
- 上下ボタンで1件ずつスライド。
- 次にスライドされる高さに合わせてスライド。
- スライドスピードとかアニメーションの種類は設定ファイルで変えられるようにした。
- 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);
使い方
1.必要ファイルを記述
<script type="text/javascript" src="/jquery.js"></script><script type="text/javascript" src="/jquery.simpleSlider.js"></script>
2.利用するhtmlの上部に以下を記述する
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $.simpleSilider();}); // ]]></script>
3.htmlを記述
<div id="slide"> <ul> <li>スライドされる内容</li> <li>スライドされる内容</li> <li>スライドされる内容</li> </ul> </div>
プラグインを作るのは敷居が高いイメージがあったけど、実際作ってみるとそこまで難しくなかった。
というかそこまでのものを作っていないだけなのだけど。。
サンプルとかまとめておけるページ作るかなー
2012.5.8追記
サンプルとかまとめておけるページ作ったので、そこでデモを用意しました。
jQueryを利用した、コンテンツスライダー – サンプルとか