- jQuery(Slider)
jQuery(Slider)
Sliderプラグインを利用する
【演習】EasySlider
【準備】
- 以下サイトより、「Easy Slider 1.7」をダウンロード
Numeric Navigation jQuery Slider
http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/
HTMLソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jquery easySlider</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/easySlider1.7.js"></script> <script> $(function(){ $("#slider").easySlider({ controlsShow:false, speed:1200, auto:true, continuous:true }); }); </script> <style> #slider ul{ list-style-type: none; margin: 0; padding: 0; } #slider li{ width: 640px; height: 427px; } </style> </head> <body> <div id="slider"> <ul> <li><img src="../img/ph01.jpg" /></li> <li><img src="../img/ph02.jpg" /></li> <li><img src="../img/ph03.jpg" /></li> <li><img src="../img/ph04.jpg" /></li> </ul> </div> </body> </html>
Speedで設定した時間でシンプルな横スライドを繰り返すプログラムを実行します。
[習作]
http://timespace.daiwa-hotcom.com/MyLessons/jQuery/easySlider/index.html
【演習】Nivo Sliders
http://dev7studios.com/plugins/nivo-slider
1. 上記サイトよりプログラムファイルをダウンロードする
2. ダウンロードした中身を整理する
※以下は、Mac用のアイコン(MacOSで作ったファイル)であるため、Windows環境では不要
_DS
_MACOS
2.2. Dreamweaver上のローカルファイルビューで不要ファイルを削除
(1) ローカルファイルビューで不要ファイルを選択
(2) [Ctrl] + [BS]キー
(3)「選択したファイルを削除してよろしいですか?」-「はい」を選択
HTMLソース
<!DOCTYPE HTML> <meta charset="utf-8"> <html lang="en"> <head> <title>Nivo Slider Demo</title> <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <!--<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>--> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="img/ph01.jpg" alt="" title="月夜"/><!--img src="img/toystory.jpg"--> <a href="http://dev7studios.com"><img src="img/ph02.jpg" alt="" title="バリ島" /></a><!--img src="img/up.jpg"--> <img src="img/ph03.jpg" alt="" title="星空" data-transition="slideInLeft" /><!--img src="img/walle.jpg"--> <img src="img/ph04.jpg" alt="" title="#htmlcaption" /><!--img src="img/nemo.jpg"--> </div> <div id="htmlcaption" class="nivo-html-caption"> <a href="#">ここからページへのリンクを記述</a> <!--<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. --> </div> </div> </div> <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html>
[習作]
http://timespace.daiwa-hotcom.com/MyLessons/jQuery/NivoSlider/index.html