クロスフェード
JavaScriptでクロスフェード
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Brand Spanking New
<script> window.onload = function() { var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 ); } </script>
- 500はフェードエフェクトの時間(0.5秒)
- 2000は各画像の表示時間(2秒)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Crossfader</title> <style> html, body, div, ul, img { margin: 0; padding: 0; } ul { list-style: none; } img { border: none; vertical-align: bottom; } #container { width: 640px; margin: 50px auto; } </style> <script src="js/bsn.js"></script> </head> <body> <div id="container"> <ul id="img_fader"> <li id="img1"><img src="img/ph01.jpg" alt=""></li> <li id="img2"><img src="img/ph02.jpg" alt=""></li> <li id="img3"><img src="img/ph03.jpg" alt=""></li> <li id="img4"><img src="img/ph04.jpg" alt=""></li> </ul> <script> var cf = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 2000, 3000 ); </script> </div> </body> </html>
CrossSlide-fade
- 必要なjQueryを読み込む
<script src="js/jquery.min.js"></script> <script src="js/jquery.cross-slide.min.js"></script>
- IDセレクタ「slideshow」を設定
<div id="slideshow"></div>
- CSSファイルにスライド表示の面積を指定する
#slideshow { width: 幅; height: 高さ; }
- head内にscriptを記述するか、script.jsを外部リンクする
<script> $(function() { $('#slideshow').crossSlide({ sleep: 2, fade: 1 }, [ { src: '画像1.jpg' }, { src: '画像2.jpg' }, { src: '画像3.jpg' }, { src: '画像4.jpg' } ]) }); </script>
スライドショーの再生回数を1回にする
loop: 1
Static cross-fade
$('#slideshow').crossSlide({ sleep: 2, fade: 1 }, [ { src: '画像1.jpg' }, { src: '画像2.jpg' }, { src: '画像3.jpg' }, { src: '画像4.jpg' } ]);
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTFf-8"> <title>JavaScriptでスライド(1)</title> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.cross-slide.min.js"></script> <style> body { text-align: center; } #slideshow { width: 400px; height: 300px; margin: 100px auto 0 auto; } </style> </head> <body> <div id="slideshow"></div> <script> $(function() { $('#slideshow').crossSlide({ sleep: 3, fade: 2 }, [ { src: 'images/01_o.jpg' }, { src: 'images/02_o.jpg' }, { src: 'images/03_o.jpg' }, { src: 'images/04_o.jpg' }, { src: 'images/05_o.jpg' } ]) }); </script> </body> </html>
Slide and cross-fade
- 大きい写真をずらす
$('#slideshow').crossSlide({ speed: 45, fade: 1 }, [ { src: '画像1.jpg', dir: 'up' }, { src: '画像2.jpg', dir: 'down' }, { src: '画像3.jpg', dir: 'up' }, { src: '画像4.jpg', dir: 'down' } ]);
Ken Burns effect
$('#slideshow').crossSlide({ fade: 1 }, [ { src: '画像1.jpg', alt: '画像1', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3 }, { src: '画像2.jpg', alt: '画像2', from: 'top left', to: 'bottom right 1.5x', time: 2 }, { src: '画像3.jpg', alt: '画像3', from: '100% 80% 1.5x', to: '80% 0% 1.1x', time: 2 }, { src: '画像4.jpg', alt: '画像4', from: '100% 50%', to: '30% 50% 1.5x', time: 2 } ], function(idx, img, idxOut, imgOut) { if (idxOut == undefined) { // starting single image phase, put up caption $('div.caption').text(img.alt).animate({ opacity: .7 }) } else { // starting cross-fade phase, take out caption $('div.caption').fadeOut() } });
Ken Burns variant
$('#slideshow').crossSlide({ fade: 1, variant: true, easing: 'easeInOutQuad' }, [ // as above ]);