スライドショー（戻る、進むボタンで画像を切り替える）

JavaScript

スライドショーの応用続き。

画像の両側に「戻る」「進む」機能をもたせた矢印マークを付けて、クリックしたら画像が切り替わる。 よく見られるアレ。

[sample03.html]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample03</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./sample03.js"></script>
  <link rel="stylesheet" href="./css/sample03.css" type="text/css" media="all">
</head>
<body>
  <div id="main">
    <a href="#" class="arrow arrow-left" onclick="goBack()"> </a>
    <img id="sample-img" src="images/001.jpg">
    <a href="#" class="arrow arrow-right" onclick="goForward()"> </a>
  </div>
</body>
</html>

矢印マークは画像ではなくCSSだけで作った。なのでスタイルシートも追加。 画像の幅と高さを決めていたスタイル指定もこちらに移した。

クラス名「arrow」のリンクタグが矢印で、左右別々に持たせたいスタイルは「arrow-left」「arrow-right」クラスで規定する。 矢印の見た目を作っているのは、「arrow」それぞれに付加した:before疑似要素の長方形で、２辺にボーダーが付いており45°傾けて矢印に見せている。 こういうのをCSSだけでやる方法は、CSSで作るシンプルな矢印アイコン29個 - PRESSMAN*Techの記事を参考にした。 矢印の色は白を65％の半透明にしている。

[main.css]

#main {
  width: 580px;
  height: auto;
}

#sample-img {
  margin-top: 15px;
  width: 100%;
  height: auto;
}

.arrow {
  position: relative;
  top: 0;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}

.arrow-left {
  float: left;
  top: 207px;
  left: -20px;
}

.arrow-right {
  float: right;
  top: -200px;
  right: -20px;
}

.arrow::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.arrow-left::before, .arrow-right::before {
  left: 0px;
  top: 0px;
  width: 15px;
  height: 15px;
  opacity: 0.65;
}

.arrow-left::before{
  margin-left: 28px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.arrow-right::before{
  margin-left: -28px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

jsのほうは、矢印をクリックしたときに呼び出されるgoBackとgoForwardの２つの関数を追加。

[sample03.js]

'use strict';

let path = "./images";
const image_src = new Array(`${path}/001.jpg`,`${path}/002.jpg`,`${path}/003.jpg`,`${path}/004.jpg`,`${path}/005.jpg`);
let num = 0;

function changeImg(num) {
  $("#sample-img").attr("src", image_src[num]);
}

function goBack(){
  if (num == 0) {
      num = 4;
  }
  else {
      num --;
  }
  changeImg(num);
}

function goForward(){
  if (num == 4) {
      num = 0;
  }
  else {
      num ++;
  }
  changeImg(num);
}

(DEMO) sample03

goBackは最初の画像までもどったら次は最後の画像へ、goForwardは最後までいったら最初へと巻き戻るようになっている。