My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/18 [jQuery] Slider

f:id:sntkk3:20140228223724g:plain

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. ダウンロードした中身を整理する

2.1.以下のようなフォルダ構成を作成し、整理する

※以下は、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