請AI幫我們做滑動圖輪播區

:::

用AI學PHP8

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>

2-1 請AI幫我們做前端界面

2-3 將首頁和滑動圖整併在一起 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1991%26tbsn%3D55

計數器

今天：
昨天：
總計：