横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(FlexSlider プラグイン)
jQueryスライダーFlexSliderの活用例を紹介します。
1.フェード(fade)画像の表示方式(アニメーション時の表示動作のスピード指定)
2..フェード表示動作完了時間(2.5秒)
jQueryの書き方 |
/* ---------------------------------------* // 31-15) 1.プラグインからダウンロードしたファイル * -----------------------------------------*/ <script type="text/javascript" src="js/jquery.flexslider.js"></script> /* ---------------------------------------* // 31-15) 2.オプションを指定する * -----------------------------------------*/ <script type="text/javascript" charset="utf-8"> $(function(){ $('.flexslider').flexslider({ animationSpeed:2500 }); }); </script> |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-15. プラグインからダウンロードしたcssファイル -------------------------------------------------------- */ <link rel="stylesheet" href="flexslider.css"> |
HTMLの書き方 |
<div class="flexslider"> <ul class="slides"> <li> <img src="../images/mv_kais001.jpg" alt="" /> </li> <li> <img src="../images/mv_kais002.jpg" alt=""/> </li> <li> <img src="../images/mv_kais003.jpg" alt=""/> </li> <li> <img src="../images/mv_kais004.jpg" alt=""/> </li> <li> <img src="../images/mv_kais005.jpg" alt=""/> </li> <li> <img src="../images/mv_kais006.jpg" alt=""/> </li> </ul> </div> |