jQueryでスライドショー
画像が変わるスライドショーを作成します。
D16で作成した「Full Screen Dog Company」を使って作成していきます。
Brackets ➡ ファイル ➡ フォルダーを開く／17slide-dog
ファイルをチェック
ダウンロードした「17slide-dog」ファイルに2つのフォルダーが追加されています。
- img フォルダー／３枚の画像（ph1.jpg、ph2.jpg、ph3.jpg）
- js フォルダー／３個のjsファイル（jquery1.7.2.min.js、script.js、slide.js）
ハンバーガーメニューボタン開閉させる「script.js」はjs フォルダーへ入れてあります。
フォルダーへ移動したのでリンクを変更しました。
HTML
<script src="script.js"></script>
<script src="js/script.js"></script>
</body>
01 HTMLにJavaScriptを記述
HTMLにJavaScriptを記述するのは、headタグ内もしくはbodyタグ内となります。
どちらの場所でも外部ファイルを読み込むこともscriptタグを使って記述することもできます。
body内に記述するときは基本的にタグの最下部に記述します。
スライドショーを動かすためのscriptファイルを記述する
※jquery1.7.2.min.jsは本体なので必ず上に記述。
HTML
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/script.js"></script>
</body>
02 CSSへスライドショーの設定
スライドショーを入れるためのスタイルシートです。CSSへ追加します。
CSS
.move {
margin: 0 auto;
max-width: 960px;
padding-top: 20px;
}
.group_imageWrap {
position: relative;
}
.group_image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition-duration: 0.8s;
transition-property: opacity;
transition-delay: 0.5s;
}
.group_image.isCurrent {
z-index: 1;
position: relative;
opacity: 1;
transition-delay: 0s;
}
03 現在入っている画像をDelete
<main>の上の画像のコードを消します。
HTML
</nav>
<img src="images/topimg.jpg" width="100%" alt="dog company">
<main>
04 画像を入れなおす
</nav>の下へ下記のコードを入れます。
960×450pxの画像サイズを作って入れるのがベストなのですが
ここで使用しているph1.jpg～ph3.jpgの実際のサイズは640×300pxなのでwidth="960"でサイズを合わせています。
HTML
</nav>
<div class="move">
<div class="group_imageWrap">
<div class="group_image"><img src="img/ph1.jpg" width="960" alt=""></div>
<div class="group_image"><img src="img/ph2.jpg" width="960" alt=""></div>
<div class="group_image"><img src="img/ph3.jpg" width="960" alt=""></div>
</div>
</div>
<main>
これで完成です。
画像を入れ替えてみよう！！
D05で画像の切り抜きや画像のリサイズを学習しましたが、もう一度練習してみましょう
01 画像をダウンロード
Pixabayのページから好きな写真を選びます。
写真が決まったらその画像をクリックして❶無料ダウンロードボタンをクリックしてください。
❷サイズは640×413にして、❸ダウンロードをクリックします
02 画像の切り抜き I LOVE IMGの場合
今回は640×300pxの画像を作成するので、画像の切り抜きを使って編集します。
まずは「I Love IMG」のページを開きます。
❶画像の切り抜きを選びます。
❷画像を選択します（画像をドロップしてもOK）
❸画像を選択すると下のような画面が出ます。
トリミングオプションに 幅640px 高さ300px と入力します
❹明るくなっているところが切り抜きになります。好きなところへ移動してください
❺位置が確定したら「画像の切り抜き➡」をクリックします
❻自動でダウンロードされるので、そのまま待ちます。
※ダウンロードボタンは押さないで！
❼ファイル名をph1.jpg～ph3.jpgにするとコードを書き換えなくてよいので便利です。
※自分でファイル名をつける場合
画像のファイル名は短いほうがおススメです。
必ず英数の小文字で名前をつけてください。名前にはスペースを入れないでください。
詳しくはこちら(PDF)