<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>5-04_image</title> <link href="../../_common/images/favicon.ico" rel="shortcut icon"> <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> <link href="../../_common/css/style.css" rel="stylesheet"> <style> section img { max-width: 100%; } .center { margin: 0 auto 0 auto; max-width: 90%; width: 500px; } ul { display: flex; margin: 0; padding: 0; list-style-type: none; } li { flex: 1 1 auto; margin-right: 6px; } li:last-of-type { margin-right: 0; } </style> </head> <body> <header> <div class="container"> <h1>イメージの切り替え</h1> <h2>画像を切り替える</h2> </div><!-- /.container --> </header> <main> <div class="container"> <section> <div class="center"> <div> <img src="img1.jpg" id="bigimg"> </div> <ul> <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li> <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li> <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li> <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li> </ul> </div> </section> </div><!-- /.container --> </main> <footer> <div class="container"> <p>JavaScript Samples</p> </div><!-- /.container --> </footer> <script> 'use strict'; const thumbs = document.querySelectorAll('.thumb'); thumbs.forEach(function(item, index) { item.onclick = function() { document.getElementById('bigimg').src = this.dataset.image; } }); </script> </body> </html>