:::
2-2 請AI幫我們做滑動圖輪播區
2-3 將首頁和滑動圖整併在一起
- 我們以
index.html為主，將slider.html中的滑動圖的結構取出，並且將CSS樣式部份獨立成style.css檔，將javaScript獨立成index.js檔，並在最後載入之，以便讓結構更清晰。 index.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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header mb-4"> <div class="container"> <h1 class="text-center">南市校園藝文活動新聞</h1> </div> </header> <div class="container"> <div class="row"> <nav class="col-md-12 mb-3"> <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li> <li class="nav-item"><a class="nav-link" href="#">校園地圖</a></li> <li class="nav-item"><a class="nav-link" href="#">產學合作網站</a></li> </ul> </nav> </div> <div class="row"> <main class="col-md-9"> <article class="mb-4"> <h2>犀牛上顎與白堊化石有看頭</h2> <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/cccccc/909090?text=Image+1" alt="主圖片"> </div> </div> </div> <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p> </article> <article class="mb-4"> <h2>跨越國界的音樂情緣-橋中管樂團與日本開智未來高校吹奏部攜手野球應援</h2> <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Orchestra+Image" class="img-fluid mb-3" alt="管樂團圖片"> <p>光武國小體育館內發出悠揚音樂，只見指揮在台前揮灑，音樂優雅且意味深長...[內容省略]</p> </article> <article> <h2>臺南慈中暑期醫院志工 看見病苦中綻放最美笑容</h2> <div class="row"> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+1" class="img-fluid" alt="圖片1"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+3" class="img-fluid" alt="圖片3"> </div> </div> <p>炎炎夏日當中，正當大家都一窩蜂地報名各種才藝班、夏令營時...[內容省略]</p> </article> <nav aria-label="Page navigation" class="mt-4"> <ul class="pagination justify-content-center"> <li class="page-item"><a class="page-link" href="#">«</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">»</a></li> </ul> </nav> </main> <aside class="col-md-3"> <div class="list-group mb-4"> <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a> <a href="#" class="list-group-item list-group-item-action">快速登入</a> </div> <div class="card mb-4"> <div class="card-header">近期新聞</div> <ul class="list-group list-group-flush"> <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li> <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li> <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li> </ul> </div> </aside> </div> </div> <footer class="bg-light mt-4 py-3"> <div class="container text-center"> <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p> <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="index.js"></script> </body> </html>- CSS樣式部份獨立成
style.css檔（在index.html中用<link rel="stylesheet" href="style.css">載入，一般置於</head>之前）：/* 網頁部份 */ .header { background-color: #e6f3ff; background-image: url('https://fakeimg.pl/2000x200/e6f3ff/909090?text=Header+Background'); background-size: cover; padding: 20px 0; } /* 滑動圖部份 */ .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; } - javaScript部份獨立成
index.js檔（在index.html中用<script src="index.js"></script>載入，一般置於</body>之前）：const images = [ { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+1', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+1' }, { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+2', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+2' }, { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+3', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+3' }, { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+4', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+4' }, { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+5', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+5' } ]; 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); - 至此，首頁的顯示頁面架構大致完成。
