<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輪播圖示例</title><style>/* 基本樣式 */body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;font-family: Arial, sans-serif;}/* 輪播圖容器 */.carousel {width: 600px;height: 400px;position: relative;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}/* 圖片容器 */.carousel-images {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease-in-out;}/* 圖片樣式 */.carousel-images img {width: 100%;height: 100%;object-fit: cover;flex-shrink: 0;}/* 左右按鈕 */.carousel-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;font-size: 18px;border-radius: 50%;transition: background-color 0.3s ease;}.carousel-button:hover {background-color: rgba(0, 0, 0, 0.8);}/* 左按鈕 */.carousel-button.prev {left: 10px;}/* 右按鈕 */.carousel-button.next {right: 10px;}/* 指示器容器 */.carousel-indicators {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;gap: 5px;}/* 指示器樣式 */.carousel-indicators span {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.5);border-radius: 50%;cursor: pointer;transition: background-color 0.3s ease;}.carousel-indicators span.active {background-color: white;}</style>
</head>
<body><!-- 輪播圖容器 --><div class="carousel"><!-- 圖片容器 --><div class="carousel-images"><img src="https://image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1"><img src="https://image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2"><img src="https://image.meiye.art/pic_1628403749737?imageMogr2/thumbnail/640x/interlace/1" alt="Image 3"></div><!-- 左右按鈕 --><button class="carousel-button prev"><</button><button class="carousel-button next">></button><!-- 指示器 --><div class="carousel-indicators"><span class="active"></span><span></span><span></span></div></div><script>// 獲取元素const carouselImages = document.querySelector('.carousel-images');const prevButton = document.querySelector('.carousel-button.prev');const nextButton = document.querySelector('.carousel-button.next');const indicators = document.querySelectorAll('.carousel-indicators span');let currentIndex = 0; // 當前顯示的圖片索引const totalImages = carouselImages.children.length; // 圖片總數// 更新指示器狀態function updateIndicators() {indicators.forEach((indicator, index) => {indicator.classList.toggle('active', index === currentIndex);});}// 切換到指定圖片function goToImage(index) {if (index < 0) {index = totalImages - 1; // 如果小于0，切換到最后一張} else if (index >= totalImages) {index = 0; // 如果超出范圍，切換到第一張}currentIndex = index;carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;updateIndicators();}// 切換到上一張圖片prevButton.addEventListener('click', () => {goToImage(currentIndex - 1);});// 切換到下一張圖片nextButton.addEventListener('click', () => {goToImage(currentIndex + 1);});// 點擊指示器切換圖片indicators.forEach((indicator, index) => {indicator.addEventListener('click', () => {goToImage(index);});});// 自動播放let autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);// 鼠標懸停時停止自動播放const carousel = document.querySelector('.carousel');carousel.addEventListener('mouseenter', () => {clearInterval(autoPlayInterval);});// 鼠標離開時恢復自動播放carousel.addEventListener('mouseleave', () => {autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);});</script>
</body>
</html>
![[Web 安全] PHP 反序列化漏洞 —— PHP 魔術方法](http://pic.xiahunao.cn/[Web 安全] PHP 反序列化漏洞 —— PHP 魔術方法)
![[LeetCode]day33 150.逆波蘭式求表達值 + 239.滑動窗口最大值](http://pic.xiahunao.cn/[LeetCode]day33 150.逆波蘭式求表達值 + 239.滑動窗口最大值)
 事件與焦點機制解析)
