<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .main-box{flolat:left; width:100%;} .thumbnail-box{float:left; width:10%;} .thumbnail-box img{width:80%; margin:10%; float:left;} .pk-slider{float:left; width:90%;} .pk-slider img{float:left; width:100%;} </style> <body> <div class="main-box"> <div class="thumbnail-box" id="thumbnail" onclick = "changeimage(event)"> <img src="1.jpg" alt="a"/> <img src="2.jpg" alt="a"/> <img src="3.jpg" alt="a"/> </div> <div class="pk-slider"> <img src="1.jpg" alt="a" id="pk-image"/> </div> </div> <script type="text/javascript"> function changeimage(event) { event = event || window.event; var targetelement = event.target || event.srcEleme...