:::
2-1 請AI幫我們做前端界面
2-2 請AI幫我們做滑動圖輪播區
- 請將以下提示詞貼入，並請AI回答：
請使用 HTML、CSS 和 JavaScript 創建一個自適應的圖片輪播區域，並使用 Bootstrap 5 來處理響應式布局。具體要求如下： 布局結構： 左側（或小屏幕上方）顯示縮圖列表 右側（或小屏幕下方）顯示大圖 功能要求： 點擊縮圖，在右側顯示對應的大圖 如果沒有點擊，則自動輪播顯示圖片（每3秒切換一次） 鼠標懸停在輪播區域時暫停自動輪播，移開後繼續 縮圖樣式： 僅當前顯示的縮圖完全不透明（opacity: 1）且有藍色細框 其他所有縮圖（包括已播放過的）保持半透明（opacity: 0.5）且無框線 鼠標懸停在縮圖上時稍微提高透明度（opacity: 0.8） 滾動效果： 縮圖區域的滾動條（不論橫向還是縱向）應跟隨當前顯示的圖片自動滾動位置 響應式設計： 使用 Bootstrap 5 的網格系統 在中等及以上屏幕尺寸（≥768px）： 左側縮圖區域佔25%寬度，右側大圖區域佔75%寬度 縮圖垂直排列，需要時可垂直滾動 在小屏幕（<768px）： 縮圖區域在下，大圖區域在上，各佔100%寬度 縮圖水平排列，需要時可水平滾動 其他細節： 假圖部份請用 https://fakeimg.pl/ 的假圖語法 使用細小的自定義滾動條樣式 確保圖片加載完成後再調整縮圖區域的高度 縮圖區域的高度應跟隨當前顯示的圖片高度 監聽窗口大小變化，相應調整布局 最後，說明部份請用正體中文回應上面這個提示詞，其實是我從最簡單的問題開始問，問到最後，再請https://claude.ai/自行總結的提示詞，這樣就可以一次到位，且不斷重複使用，而無須再次慢慢問，也可以避免太早觸發免費使用的上限。 - 最後得到的結果（可能每次都會不一樣），請開新檔，存成
slider.html<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自適應圖片輪播區域</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> <style> .thumbnail-container { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } .thumbnail-container::-webkit-scrollbar { width: 6px; } .thumbnail-container::-webkit-scrollbar-track { background: #f1f1f1; } .thumbnail-container::-webkit-scrollbar-thumb { background: #888; } .thumbnail-container::-webkit-scrollbar-thumb:hover { background: #555; } .thumbnail { opacity: 0.5; transition: opacity 0.3s; cursor: pointer; } .thumbnail:hover { opacity: 0.8; } .thumbnail.active { opacity: 1; border: 2px solid blue; } #mainImage { width: 100%; height: auto; } </style> </head> <body> <div class="container-fluid mt-3"> <div class="row"> <div class="col-md-3 order-md-1 order-2 mb-3 mb-md-0"> <div class="thumbnail-container" id="thumbnailContainer"> <!-- 縮圖將通過 JavaScript 動態添加 --> </div> </div> <div class="col-md-9 order-md-2 order-1"> <img id="mainImage" src="https://fakeimg.pl/800x600/ff0000,128/000,255" alt="主圖片"> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script> <script> const images = [ { thumb: 'https://fakeimg.pl/100x75/ff0000,128/000,255', full: 'https://fakeimg.pl/800x600/ff0000,128/000,255' }, { thumb: 'https://fakeimg.pl/100x75/ff0000,128/000,255', full: 'https://fakeimg.pl/800x600/ff0000,128/000,255' }, { thumb: 'https://fakeimg.pl/100x75/ff0000,128/000,255', full: 'https://fakeimg.pl/800x600/ff0000,128/000,255' }, { thumb: 'https://fakeimg.pl/100x75/ff0000,128/000,255', full: 'https://fakeimg.pl/800x600/ff0000,128/000,255' }, { thumb: 'https://fakeimg.pl/100x75/ff0000,128/000,255', full: 'https://fakeimg.pl/800x600/ff0000,128/000,255' } ]; let currentIndex = 0; let intervalId; const mainImage = document.getElementById('mainImage'); const thumbnailContainer = document.getElementById('thumbnailContainer'); function createThumbnails() { images.forEach((img, index) => { const thumbnail = document.createElement('img'); thumbnail.src = img.thumb; thumbnail.alt = `縮圖 ${index + 1}`; thumbnail.className = `thumbnail img-fluid mb-2 ${index === 0 ? 'active' : ''}`; thumbnail.onclick = () => showImage(index); thumbnailContainer.appendChild(thumbnail); }); } function showImage(index) { currentIndex = index; mainImage.src = images[index].full; updateThumbnails(); scrollThumbnail(); } function updateThumbnails() { const thumbnails = thumbnailContainer.getElementsByClassName('thumbnail'); Array.from(thumbnails).forEach((thumb, index) => { thumb.classList.toggle('active', index === currentIndex); }); } function scrollThumbnail() { const activeThumbnail = thumbnailContainer.getElementsByClassName('active')[0]; if (activeThumbnail) { if (window.innerWidth >= 768) { thumbnailContainer.scrollTop = activeThumbnail.offsetTop - thumbnailContainer.offsetTop; } else { thumbnailContainer.scrollLeft = activeThumbnail.offsetLeft - thumbnailContainer.offsetLeft; } } } function startCarousel() { stopCarousel(); intervalId = setInterval(() => { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); }, 3000); } function stopCarousel() { if (intervalId) { clearInterval(intervalId); } } function adjustLayout() { const isMobile = window.innerWidth < 768; thumbnailContainer.style.height = isMobile ? 'auto' : `${mainImage.offsetHeight}px`; thumbnailContainer.style.overflowX = isMobile ? 'auto' : 'hidden'; thumbnailContainer.style.overflowY = isMobile ? 'hidden' : 'auto'; thumbnailContainer.style.whiteSpace = isMobile ? 'nowrap' : 'normal'; Array.from(thumbnailContainer.getElementsByClassName('thumbnail')).forEach(thumb => { thumb.style.display = isMobile ? 'inline-block' : 'block'; thumb.style.width = isMobile ? 'auto' : '100%'; thumb.style.height = isMobile ? '75px' : 'auto'; thumb.style.marginRight = isMobile ? '10px' : '0'; }); scrollThumbnail(); } createThumbnails(); showImage(0); startCarousel(); mainImage.addEventListener('load', adjustLayout); window.addEventListener('resize', adjustLayout); thumbnailContainer.addEventListener('mouseenter', stopCarousel); thumbnailContainer.addEventListener('mouseleave', startCarousel); mainImage.addEventListener('mouseenter', stopCarousel); mainImage.addEventListener('mouseleave', startCarousel); </script> </body> </html>
