XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

1. 請將以下提示詞貼入，並請AI回答： 
    ```markup
    請使用 HTML、CSS 和 JavaScript 創建一個自適應的圖片輪播區域，並使用 Bootstrap 5 來處理響應式布局。具體要求如下：
    
    布局結構：
    左側（或小屏幕上方）顯示縮圖列表
    右側（或小屏幕下方）顯示大圖
    
    功能要求：
    點擊縮圖，在右側顯示對應的大圖
    如果沒有點擊，則自動輪播顯示圖片（每3秒切換一次）
    鼠標懸停在輪播區域時暫停自動輪播，移開後繼續
    
    縮圖樣式：
    僅當前顯示的縮圖完全不透明（opacity: 1）且有藍色細框
    其他所有縮圖（包括已播放過的）保持半透明（opacity: 0.5）且無框線
    鼠標懸停在縮圖上時稍微提高透明度（opacity: 0.8）
    
    滾動效果：
    縮圖區域的滾動條（不論橫向還是縱向）應跟隨當前顯示的圖片自動滾動位置
    
    響應式設計：
    使用 Bootstrap 5 的網格系統
    在中等及以上屏幕尺寸（≥768px）：
    
    左側縮圖區域佔25%寬度，右側大圖區域佔75%寬度
    縮圖垂直排列，需要時可垂直滾動
    
    
    在小屏幕（<768px）：
    縮圖區域在下，大圖區域在上，各佔100%寬度
    縮圖水平排列，需要時可水平滾動
    
    
    其他細節：
    假圖部份請用 https://fakeimg.pl/ 的假圖語法
    使用細小的自定義滾動條樣式
    確保圖片加載完成後再調整縮圖區域的高度
    縮圖區域的高度應跟隨當前顯示的圖片高度
    監聽窗口大小變化，相應調整布局
    
    最後，說明部份請用正體中文回應
    ```
    
    <div class="alert alert-info">上面這個提示詞，其實是我從最簡單的問題開始問，問到最後，再請<https://claude.ai/>自行總結的提示詞，這樣就可以一次到位，且不斷重複使用，而無須再次慢慢問，也可以避免太早觸發免費使用的上限。</div>
2. 最後得到的結果（可能每次都會不一樣），請開新檔，存成 `slider.html` 
    ```markup
    
    <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">
                        
                    </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>
    ```
 
</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1991

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器