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