vegasさんには割とお世話になっています。
簡単に背景をスライドショーにできる便利モジュールです。
まずはhtmlのhead内にCSSファイルとjsファイルを入れます。
<link rel="stylesheet" type="text/css" href="css/vegas.min.css" /> <script src="js/vegas.min.js"></script>
HTML
<!DOCTYPE html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>DEMO | ROOTSTYLEDESIGN</title> <link rel="stylesheet" type="text/css" href="/demo/assets/css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/vegas.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/vegas.min.js"></script> </head> スクリプト 以下のスクリプトを挿入しましょう。 $(function(){ $('#vegas-wrapper .bg-slider').vegas({ slides: [ { src: 'images/main_1.jpg', transition: 'fade2' }, { src: 'images/main_2.jpg', transition: 'fade2' }, { src: 'images/main_3.jpg', transition: 'fade2' }, { src: 'images/main_4.jpg', transition: 'fade2' } ], transitionDuration: 2000, //スライドの遷移アニメーションの時間 delay: 5000, //スライド切り替え時の遅延時間 animationDuration: 10000, //スライド表示中のアニメーションの時間 loop: true, }); });
transition: ‘fade2’はイメージが切り替わる際のアニメーションの種類です。
オプションは多数あり、vegas.jsで確認できます。
上記はイメージごとに設定しています。
つまり、1番目はfade2で2番目はblurという風に個別でアニメーションを変更する事ができます。
ちなみに全て同じアニメーションにするためには以下のように設定すればOKです。
$(function(){
$('#vegas-wrap .bg-slider').vegas({
slides: [
{ src: 'images/main_1.jpg' },
{ src: 'images/main_2.jpg' },
{ src: 'images/main_3.jpg' },
{ src: 'images/main_4.jpg' }
],
transition: 'blur', //スライドを遷移させる際のアニメーション
transitionDuration: 2000, //スライドの遷移アニメーションの時間
delay: 5000, //スライド切り替え時の遅延時間
animationDuration: 10000, //スライド表示中のアニメーションの時間
loop: true,
});
});
HTML
まとめると以下のようになります。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>DEMO | ROOTSTYLEDESIGN</title> <link rel="stylesheet" type="text/css" href="/demo/assets/css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/vegas.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/vegas.min.js"></script> <script> $(function(){ $('#vegas-wrapper .bg-slider').vegas({ slides: [ { src: 'images/main_1.jpg', transition: 'fade2' }, { src: 'images/main_2.jpg', transition: 'fade2' }, { src: 'images/main_3.jpg', transition: 'fade2' }, { src: 'images/main_4.jpg', transition: 'fade2' } ], transitionDuration: 2000, //スライドの遷移アニメーションの時間 delay: 5000, //スライド切り替え時の遅延時間 animationDuration: 10000, //スライド表示中のアニメーションの時間 loop: true, }); }); </script> </head> <body> <!--vegas--> <div class="vegas-wrap"> <div class="bg-slider"> </div> </div> <!--/vegas--> </body> </html>
NEXTとPREVEWを追加する
NEXTボタンとPREVEWボタンを設置してスライドショーをコントロールできるよう以下を追加します。
$('a.prev').on('click', function(e) {
$('vegas-wrapper .bg-slider').vegas('options', 'transition', 'fade2').vegas('previous');
e.preventDefault();
});
$('a.next').on('click', function(e) {
$('#vegas-wrapper .bg-slider').vegas('options', 'transition', 'fade2').vegas('next');
e.preventDefault();
});
おお、できました！
以上、簡単ですがメモです。
詳しくはvegas.jsで確認してください。
