JavaScriptでスライドショー
2019/07/15

この記事を書いている人 - WRITER -
http://mukuchan.com/dotinstall/js/slideshow/
プレゼンテーションなどのスライドを切り替えるプログラムです。
数字のみのイメージですが、写真を入れ替えればいろいろと応用できそう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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"><</li> <li id="next">></li> </ul> </nav> <ul class="thumbnails"></ul> </div> <script src="js/main.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
'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 -