JavaScriptでスライドショー

2019/07/12

2019/07/15

この記事を書いている人 - WRITER -

サラリーマンエンジニアです。平成３１年４月１日から1日当たり100円を FX口座に積立てて令和元年の初日から自作プログラムによるシステムトレードをしています。プログラミングを基礎から学習しつつ効率的な自動売買ロジックを考えて、副収入で月給を超えることを目標にコツコツ頑張ります。

http://mukuchan.com/dotinstall/js/slideshow/

プレゼンテーションなどのスライドを切り替えるプログラムです。

数字のみのイメージですが、写真を入れ替えればいろいろと応用できそう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Slideshow</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <main>
      <img>
    </main>

    <nav>
      <ul>
        <li id="play">Play</li>
        <li id="pause" class="hidden">Pause</li>
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
      </ul>
    </nav>

    <ul class="thumbnails"></ul>
  </div>

  <script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Slideshow</title>

</head>

<body>

<main>

<img>

</main>

<nav>

<ul>

<li id="pause" class="hidden">Pause</li>

</ul>

</nav>

</div>

</body>

</html>

.container {
  width: 300px;
  margin: 0 auto;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

main {
  margin-bottom: 8px;
}

main img {
  width: 300px;
  height: 200px;
  vertical-align: bottom;
}

nav {
  margin-bottom: 8px;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav li {
  width: 60px;
  border: 1px solid #dedede;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

nav li:hover {
  background: #f8f8f8;
}

#play, #pause {
  width: 140px;
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: 5px;
}

.thumbnails li {
  cursor: pointer;
  opacity: 0.4;
}

.thumbnails li:hover {
  opacity: 1;
}

.thumbnails li.current {
  opacity: 1;
}

.thumbnails img {
  width: 56px;
  vertical-align: bottom;
}

.hidden {
  display: none;
}

.container {

width: 300px;

margin: 0 auto;

}

ul {

list-style: none;

padding: 0;

margin: 0;

}

main {

margin-bottom: 8px;

}

main img {

width: 300px;

height: 200px;

vertical-align: bottom;

}

nav {

margin-bottom: 8px;

}

nav ul {

display: flex;

justify-content: space-between;

}

nav li {

width: 60px;

border: 1px solid #dedede;

border-radius: 4px;

font-size: 12px;

padding: 4px;

text-align: center;

cursor: pointer;

user-select: none;

}

nav li:hover {

background: #f8f8f8;

}

#play, #pause {

width: 140px;

}

.thumbnails {

display: grid;

grid-template-columns: repeat(5, 56px);

gap: 5px;

}

.thumbnails li {

cursor: pointer;

opacity: 0.4;

}

.thumbnails li:hover {

opacity: 1;

}

.thumbnails li.current {

opacity: 1;

}

.thumbnails img {

width: 56px;

vertical-align: bottom;

}

.hidden {

display: none;

}

'use strict';

{
  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];

  let currentNum = 0;

  function setMainImage(image) {
    document.querySelector('main img').src = image;
  }

  setMainImage(images[currentNum]);

  function removeCurrentClass() {
    document.querySelectorAll('.thumbnails li')[currentNum]
      .classList.remove('current');
  }

  function addCurrentClass() {
    document.querySelectorAll('.thumbnails li')[currentNum]
      .classList.add('current');
  }

  const thumbnails = document.querySelector('.thumbnails');
  images.forEach((image, index) => {
    const li = document.createElement('li');
    if (index === currentNum) {
      li.classList.add('current');
    }

    li.addEventListener('click', () => {
      setMainImage(image);
      removeCurrentClass();
      currentNum = index;
      addCurrentClass();
    });

    const img = document.createElement('img');
    img.src = image;
    li.appendChild(img);
    thumbnails.appendChild(li);
  });

  const next = document.getElementById('next');
  next.addEventListener('click', () => {
    removeCurrentClass();
    currentNum++;
    if (currentNum === images.length) {
      currentNum = 0;
    }
    addCurrentClass();
    setMainImage(images[currentNum]);
  });

  const prev = document.getElementById('prev');
  prev.addEventListener('click', () => {
    removeCurrentClass();
    currentNum--;
    if (currentNum < 0) {
      currentNum = images.length - 1;
    }
    addCurrentClass();
    setMainImage(images[currentNum]);
  });

  let timeoutId;

  function playSlideshow() {
    timeoutId = setTimeout(() => {
      next.click();
      playSlideshow();
    }, 1000);
  }

  const play = document.getElementById('play');
  const pause = document.getElementById('pause');

  play.addEventListener('click', () => {
    play.classList.add('hidden');
    pause.classList.remove('hidden');
    playSlideshow();
  });

  pause.addEventListener('click', () => {
    play.classList.remove('hidden');
    pause.classList.add('hidden');
    clearTimeout(timeoutId);
  });
}

'use strict';

{

const images = [

'img/pic00.png',

'img/pic01.png',

'img/pic02.png',

'img/pic03.png',

'img/pic04.png',

'img/pic05.png',

'img/pic06.png',

'img/pic07.png',

];

let currentNum = 0;

function setMainImage(image) {

document.querySelector('main img').src = image;

}

setMainImage(images[currentNum]);

function removeCurrentClass() {

document.querySelectorAll('.thumbnails li')[currentNum]

.classList.remove('current');

}

function addCurrentClass() {

document.querySelectorAll('.thumbnails li')[currentNum]

.classList.add('current');

}

const thumbnails = document.querySelector('.thumbnails');

images.forEach((image, index) => {

const li = document.createElement('li');

if (index === currentNum) {

li.classList.add('current');

}

li.addEventListener('click', () => {

setMainImage(image);

removeCurrentClass();

currentNum = index;

addCurrentClass();

});

const img = document.createElement('img');

img.src = image;

li.appendChild(img);

thumbnails.appendChild(li);

});

const next = document.getElementById('next');

next.addEventListener('click', () => {

removeCurrentClass();

currentNum++;

if (currentNum === images.length) {

currentNum = 0;

}

addCurrentClass();

setMainImage(images[currentNum]);

});

const prev = document.getElementById('prev');

prev.addEventListener('click', () => {

removeCurrentClass();

currentNum--;

if (currentNum < 0) {

currentNum = images.length - 1;

}

addCurrentClass();

setMainImage(images[currentNum]);

});

let timeoutId;

function playSlideshow() {

timeoutId = setTimeout(() => {

next.click();

playSlideshow();

}, 1000);

}

const play = document.getElementById('play');

const pause = document.getElementById('pause');

play.addEventListener('click', () => {

play.classList.add('hidden');

pause.classList.remove('hidden');

playSlideshow();

});

pause.addEventListener('click', () => {

play.classList.remove('hidden');

pause.classList.add('hidden');

clearTimeout(timeoutId);

});

}

この記事を書いている人 - WRITER -

mukuchan

JavaScriptでスライドショー

関連記事 - Related Posts -

１日の新規注文約定率が低い

JavaScriptで音声認識サービス

無駄遣い？

progate のHTML&CSS道場コース中級編

最新記事 - New Posts -

口座状況(第55週)

口座状況(第54週)

４月１日

年間収支

- Comments - コメントをキャンセル

JavaScriptでスライドショー

共有:

関連記事 - Related Posts -

最新記事 - New Posts -

- Comments - コメントをキャンセル