
「Cool Carousels」でつくる、スライド表示の時間経過を示すシークバー付きスライドショー
2014年12月9日jQueryプラグイン活用
jQueryプラグイン「Cool Carousels」で、スライド表示の時間経過を示すシークバー付きスライドショーをつくることができます。
JavaScript
(function($){ $(function() { var $imgs = $('#photo'), $timr = $('#timer'); $imgs.carouFredSel({ circular: false, scroll: { easing: 'quadratic', duration: 1, timeoutDuration: 4000, onBefore: function( data ) { $timr.stop().animate({ opacity: 0 }, data.scroll.duration); }, onAfter: function() { $timr.stop().animate({ opacity: 1 }, 150); } }, auto: { progress: '#timer' }, pagination: { container: '#pager', anchorBuilder: function( i ) { return '<a class="p' + i + '" href="#"></a>'; } } }); }); })(jQuery);
HTML
<div id="slideShow"> <div id="photo"> <img src="img01.jpg" width="481" height="319" /> <img src="img02.jpg" width="481" height="319" /> <img src="img03.jpg" width="481" height="319" /> </div> <div id="timer"></div> <div id="pager"></div> </div>
CSS
#slideShow { width: 481px; height: 319px; margin: 0 auto; position: relative; } #photo img { display: block; float: left; } #timer { width: 481px; height: 3px; background-color: #ffbc30; } #pager { position: absolute; left: 50%; bottom: 15px; margin-left: -21px; } #pager a { border: 1px solid #fff; border-radius: 10px; display: none; width: 10px; height: 10px; margin: 0 3px; } #pager a:hover { background: rgba( 255, 255, 255, 0.5); } #pager a.selected { background-color: #ffffff; } #pager a { display: inline-block; }