HTML 缩略图自动全屏显示大图，支持滑动切换功能

{/n/'title/': /'HTML 缩略图自动全屏显示大图，支持滑动切换功能/',/n/'description/': /'使用 JavaScript 和 CSS 实现一个简单的图片库功能，点击缩略图自动全屏显示大图，并支持前/后切换，以及滑动切换功能。/',/n/'keywords/': /'HTML, JavaScript, CSS, 缩略图, 全屏, 大图, 切换, 滑动, 图片库/',/n/'content/': /'可以使用以下步骤来实现上述功能：//n//n1. 在HTML中，使用一个包含所有缩略图的div，给每个缩略图添加一个点击事件监听器。//n//nhtml//n<div id=/'thumbnails/'>//n <img src=/'thumbnail1.jpg/' onclick=/'showImage(1)/' />//n <img src=/'thumbnail2.jpg/' onclick=/'showImage(2)/' />//n <img src=/'thumbnail3.jpg/' onclick=/'showImage(3)/' />//n <!-- 其他缩略图 -->//n</div>//n//n//n2. 创建一个JavaScript函数showImage(index)，该函数接受一个索引参数，表示要显示的大图的索引。//n//njavascript//nfunction showImage(index) {//n // 创建一个全屏的div元素，用于显示大图//n var fullscreenDiv = document.createElement(/'div/');//n fullscreenDiv.id = /'fullscreen/';//n document.body.appendChild(fullscreenDiv);//n //n // 创建一个img元素，用于显示对应的大图//n var image = document.createElement(/'img/');//n image.src = /'image/' + index + /'.jpg/';//n fullscreenDiv.appendChild(image);//n //n // 添加点击空白处或按ESC退出大图模式的事件监听器//n fullscreenDiv.addEventListener(/'click/', hideImage);//n document.addEventListener(/'keydown/', function(event) {//n if (event.keyCode === 27) {//n hideImage();//n }//n });//n //n // 添加切换前一张和后一张的按钮//n var prevButton = document.createElement(/'button/');//n prevButton.innerHTML = /'Previous/';//n prevButton.addEventListener(/'click/', function() {//n showImage(index - 1);//n });//n fullscreenDiv.appendChild(prevButton);//n //n var nextButton = document.createElement(/'button/');//n nextButton.innerHTML = /'Next/';//n nextButton.addEventListener(/'click/', function() {//n showImage(index + 1);//n });//n fullscreenDiv.appendChild(nextButton);//n}//n//n//n3. 创建一个JavaScript函数hideImage()，该函数用于隐藏大图并移除全屏的div元素。//n//njavascript//nfunction hideImage() {//n var fullscreenDiv = document.getElementById(/'fullscreen/');//n document.body.removeChild(fullscreenDiv);//n}//n//n//n4. 使用CSS样式来实现全屏显示和滑动切换的效果。//n//ncss//n#fullscreen {//n position: fixed;//n top: 0;//n left: 0;//n width: 100%;//n height: 100%;//n background-color: black;//n display: flex;//n justify-content: center;//n align-items: center;//n}//n//n#fullscreen img {//n max-width: 100%;//n max-height: 100%;//n}//n//n#fullscreen button {//n position: fixed;//n top: 50%;//n transform: translateY(-50%);//n padding: 10px;//n background-color: #fff;//n border: none;//n font-size: 14px;//n cursor: pointer;//n}//n//n#fullscreen button:first-child {//n left: 10px;//n}//n//n#fullscreen button:last-child {//n right: 10px;//n}//n//n//n这样，当点击缩略图时，会自动载入对应的大图并在全屏模式下显示。在PC端，可以通过点击切换按钮来切换前一张和后一张大图；在移动端，可以通过滑动切换大图。点击空白处或按ESC键可退出大图模式回到页面。/'}/