JavaScript

jQueryでスライドショーを作ってみよう!

今回は段階を踏んだ課題にチャレンジしていきながら簡単な画像のスライドショーを実装してもらいます。スライドショーは色々なサイトで使われていて、普段目にすることは多いと思いますがそれが実際はどのように動いているのか、までを把握している人はすくないと思います。仕組みを知ることでpluginのカスタマイズや、自作にも役立ちますので、ぜひ取り組んでみてください。

問題: 1


完成品の仕様


・上に画像の縮小画像一覧が並んでいる。
・上の画像をクリックすると、クリックした画像が下の表示スペースに表示される。
・[前へ]ボタンをクリックすると、前の画像が下の表示スペースに表示される。
・[次へ]ボタンをクリックすると、次の画像が下の表示スペースに表示される。
・下の表示スペースに表示されている画像だけ、強調表示される。


動きを確認


準備


1.下のリンク先からslidesshow.zipをダウンロードしてください。
ダウンロード
2. slidesshow.zipを解凍して任意の場所にslidesshowディレクトリを置いてください。
3. slidesshowディレクトリの中に以下のファイルが入っていることを確認してください。


https://tech-drill.s3.amazonaws.com/uploads/questions/images/0bf13715a9593340bb3f6b285a771853.png


問題


以下のように縮小画像一覧の画像をクリックすると、下の画像(#main img)がクリックした画像に切り替わるようにしてください。


※作業場所: slidesshow.js
動きを確認

問題: 2


index.htmlを以下のように変更してください。


index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="slidesshow.js"></script>
  <title>第16回メンター週次テスト</title>
  <style>
    body {
      margin: 10px auto;
      text-align: center;
    }
    .thumbnail {
      width: 125px;
      height: 83px;
      cursor: pointer;
    }
    .thumbnail + .thumbnail {
      margin-left: 4px;
    }
    #main img {
      width: 513px;
    }
  </style>
</head>
<body>
  <div id="thumbnails">
  </div>
  <div id="main">
  </div>
  <div id="nav">
    <button id="prev">&laquo; 前へ</button>
    <button id="next">次へ &raquo;</button>
  </div>
</body>
</html>

以下のように[前へ]ボタンを押したら下の画像(#main img)が前の画像に切り替わり、[次へ]ボタンを押したら下の画像(#main img)が次の画像切り替わるようにしてください。
なお、縮小画像一覧をクリックした際の挙動にも注意してください。


※作業場所: slidesshow.js


動きを確認

問題: 3

index.htmlを以下のように変更してください。


index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="slidesshow.js"></script>
  <title>第16回メンター週次テスト</title>
  <style>
    body {
      margin: 10px auto;
      text-align: center;
    }
    .thumbnail {
      width: 125px;
      height: 83px;
      opacity: 0.5;
      cursor: pointer;
    }
    .current {
      opacity: 1.0;
    }
    .thumbnail + .thumbnail {
      margin-left: 4px;
    }
    #main img {
      width: 513px;
    }
  </style>
</head>
<body>
  <div id="thumbnails">
  </div>
  <div id="main">
  </div>
  <div id="nav">
    <button id="prev">&laquo; 前へ</button>
    <button id="next">次へ &raquo;</button>
  </div>
</body>
</html>

以下のように今、下の画像(#main img)に表示している縮小画像にopacity: 1.0を当てて強調表示をするようにしてください。


※作業場所: slidesshow.js


動きを確認